dynamisches Dropdown javaScript

[elexis_linux]

Im Header die Funktion:

Code: Alles auswählen

<script language="Javascript"> function auswahl() { var kategorieAuswahl = document.forms.liste.hpkategorie; var unterkategorieAuswahl = document.forms.liste.unterkategorie; unterkategorieAuswahl.options.length = 0; if (kategorieAuswahl.options[kategorieAuswahl.selectedIndex].value == "Extension") { unterkategorieAuswahl.options[0] = new Option("Magazin"); unterkategorieAuswahl.options[0] = new Option("Inserat"); } else if (kategorieAuswahl.options[kategorieAuswahl.selectedIndex].value == "Queues") { unterkategorieAuswahl.options[0] = new Option("Welt"); unterkategorieAuswahl.options[0] = new Option("All"); } } </script>

Dann das Dropdown in einem Form:

Code: Alles auswählen

<form name="liste"> <select name="hpkategorie" size="1" onchange="auswahl()"> <option value="Extension">Extension</option> <option value="Queues">Queues</option> </select> <select size="1" name="unterkategorie"> <option selected></option> <option></option> </select>

################################### Mit verstecken von Divs einblenden und ausblenden beispiel ##

Jetzt kann man auch divs einblenden oder verstecken je dropdown:

Code: Alles auswählen

<div id="selectbox" style="display:none"> <select size="1" name="unterkategorie"> <option selected></option> <option></option> </select> </div> <div id="textbox" style="display:none"> <input type="text" name="extension" value="" size="40" maxlength="40"/> </div>

und jetzt kann man in der Funktion die Display wechseln so:

Code: Alles auswählen

function auswahl() { var kategorieAuswahl = document.forms.liste.hpkategorie; var unterkategorieAuswahl = document.forms.liste.unterkategorie; unterkategorieAuswahl.options.length = 0; if (kategorieAuswahl.options[kategorieAuswahl.selectedIndex].value == "Extension") { $('selectbox').show(); $('textbox').hide(); unterkategorieAuswahl.options[0] = new Option("Magazin"); unterkategorieAuswahl.options[0] = new Option("Inserat"); } else if (kategorieAuswahl.options[kategorieAuswahl.selectedIndex].value == "Queues") { $('selectbox').hide(); $('textbox').show(); } }