14.03.2024, 15:40
Hi Lisa:4_33,
geht klar - hier ist mein Vorschlag:
Das Select-Element wird erstellt wenn keines vorhanden ist und wenn ein Datum geändert wird, werden die Uhrzeiten die man auswählen kann geändert. Dabei werden erst alles option-Elemente entfernt und dann durch neue option-Elemente ersetzt.
Viele Grüße rzscout
geht klar - hier ist mein Vorschlag:
Code:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dynamische Auswahl Uhrzeit</title>
<script>
let datum;
document.addEventListener("DOMContentLoaded", init);
function init() {
datum = document.querySelector("#datum");
datum.addEventListener("change", checkDatum);
}
function checkDatum() {
let myDateObj = new Date(datum.value);
let myDay = myDateObj.getDay();
switch(myDay) {
case 1:
createInput(['10 Uhr', '11 Uhr', '12 Uhr']);
break;
case 2:
createInput(['10 Uhr', '11 Uhr', '12 Uhr']);
break;
case 3:
createInput(['10 Uhr', '11 Uhr', '12 Uhr']);
break;
case 4:
createInput(['10 Uhr', '11 Uhr', '12 Uhr']);
break;
case 5:
createInput(['10 Uhr', '11 Uhr']);
break;
case 6:
createInput(['10 Uhr']);
break;
case 0:
default:
createInput(["Keine Termin möglich"]);
}
}
function createInput($myArray) {
if(document.querySelector('#uhrzeit')) {
while(document.querySelector('#uhrzeit').firstChild) {
document.querySelector('#uhrzeit').firstChild.remove();
}
$myArray.forEach(item => {
let newElem = document.createElement('option');
newElem.textContent = item;
document.querySelector('#uhrzeit').appendChild(newElem);
});
} else {
newSelect = document.createElement('select');
newSelect.size = "1";
newSelect.setAttribute('id', 'uhrzeit');
document.body.appendChild(newSelect);
$myArray.forEach(item => {
let newElem = document.createElement('option');
newElem.textContent = item;
document.querySelector('#uhrzeit').appendChild(newElem);
});
}
}
</script>
</head>
<body>
<input type="date" name="datum" id="datum">
</body>
</html>Das Select-Element wird erstellt wenn keines vorhanden ist und wenn ein Datum geändert wird, werden die Uhrzeiten die man auswählen kann geändert. Dabei werden erst alles option-Elemente entfernt und dann durch neue option-Elemente ersetzt.
Viele Grüße rzscout
"Gerne dürft ihr mir eine gute Bewertung da lassen aber auch gegenüber Kritik bin ich offen" 