22.11.2022, 16:56
Hi wuppti,
ja ich habe für dich eine passende Lösung gebastelt.
Ich glaube du meinst so etwas:
Wenn du weitere Fragen hast oder wenn du etwas anderes wolltest einfach hier in den Thread schreiben.
VG
rzscout
ja ich habe für dich eine passende Lösung gebastelt.
Ich glaube du meinst so etwas:
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dynamische Auswahl</title>
<style>
</style>
<script>
var dynamic;
var anw1 = ['option1','option2','option3','option4'];
var anw2 = ['Option 1', 'Option 2', 'Option 3', 'Option 4'];
var dauer1 = ['option1', 'option2', 'option3', 'option4'];
var dauer2 = ['10min', '15min', '30min', '60min'];
document.addEventListener('DOMContentLoaded', init);
function init() {
dynamic = document.getElementById("dynamic");
let gutschein = document.querySelector('#gutschein');
gutschein.addEventListener('input', function() {
let eingabe = gutschein.value;
switch (eingabe) {
case 'massage':
case 'xxx':
removeElements();
addanwendung();
adddauer();
break;
case 'empty':
removeElements();
break;
case 'yyy':
case 'zzz':
removeElements();
break;
default:
removeElements();
}
});
}
function removeElements() {
const myNode = dynamic;
while (myNode.firstChild) {
let myNodeChild = myNode.lastChild;
if(myNodeChild.hasChildNodes()) {
while(myNodeChild.firstChild) {
myNodeChild.removeChild(myNodeChild.lastChild);
}
} else {
myNode.removeChild(myNode.lastChild);
}
}
}
function addanwendung() {
let select = document.createElement('select');
select.setAttribute('name', 'anwendung');
select.setAttribute('id', 'anwendung');
dynamic.appendChild(select);
anw1.forEach((element, index) => {
let option = document.createElement('option');
option.setAttribute('value', element);
option.textContent = anw2[index];
select.appendChild(option);
});
select.firstChild.selected = 'selected';
}
function adddauer() {
let select = document.createElement('select');
select.setAttribute('name', 'dauer');
select.setAttribute('id', 'dauer');
dynamic.appendChild(select);
dauer1.forEach((element, index) => {
let option = document.createElement('option');
option.setAttribute('value', element);
option.textContent = dauer2[index];
select.appendChild(option);
});
}
</script>
</head>
<body>
<form action="./php/gutschein.php" method="post" name="auswahl">
<label for="gutschein">Gutschein für:</label>
<select name="gutschein" id="gutschein">
<option value="empty">Bitte wählen</option>
<option value="massage">Massage-Angebot</option>
<option value="xxx">xxx</option>
<option value="yyy">yyy</option>
<option value="zzz">zzz</option>
</select>
<div id="dynamic">
</div>
</form>
</body>
</html>Wenn du weitere Fragen hast oder wenn du etwas anderes wolltest einfach hier in den Thread schreiben.
VG
rzscout
"Gerne dürft ihr mir eine gute Bewertung da lassen aber auch gegenüber Kritik bin ich offen" 