Dynamisches DropDown mit mehreren Untermenüs

[Amphestrite]

Hallo, ich habe bereits ein JavaScript DropDown Menü erstellt, allerdings stehe ich momentan an:

Ich möchte noch ein 3tes Untermenü, das aber auf das 2te Untermenü zugreifen muss. Sprich, wenn ich "Wien" selektiere, er nur die Namen ausspuckt, die in Wien sind, wenn ich "St. Pölten" selektiere, dass er nur die Namen aussspuckt, die in St. Pölten sind usw.

Bisher habe ich es nur geschafft, dass wenn man "Österreich" auswählt, er die eingegeben Städte auflistet und wenn man "Deutschland" auswählt, er nur deutsche Städte auflistet.

Kann mir jemand helfen? Ich hab schon soviel ausprobiert, aber irgendwie ist der Fehler begraben.

Danke und Lg Birgit

 

[SpiceLab]

Bitte Quellcode-Angaben nicht als Bildschirmfoto anhängen, sondern im dafür vorgesehenen [code][/code]-Tag präsentieren. So kann man ihn auch fix in eine Testseite rüberkopieren, und wird hier nicht zum Abtippen verdammt.

Desweiteren kann die Code-Box für die unterschiedlichen Sprachen im Syntax-Highlighting differenziert werden:

• [code=HTML][/code]
• [code=CSS][/code]
• [code=JavaScript][/code]
• [code=jQuery][/code]
• [code=PHP][/code]
• ...

https://www.tutorials.de/help/bb-codes#codetag

[edit]Tipp-Ex[/edit]​

 

[Amphestrite]

<form name="verzeichnis">
    <select size="1" name="kategorie" onchange="update_auswahl()">

    <option value="Auswahl" selected>Auswahl</option>
    <option value="Österreich">Österreich</option>
    <option value="Deutschland">Deutschland</option> </select>

    <select size="1" name="unterkategorie">
    <option selected>Auswahl</option>
    <option>Wien</option>
    <option>St. Pölten</option>
    <option>Krems</option>
    <option>Stockerau/Ernstbrunn</option>
    <option>Köln</option>
    </select></form>

    <select size="1" name="unterkategorie2">
    <option selected>Auswahl</option>
    <option>Harry</option>
    <option>Nicole</option>
    <option>Sabine</option>
    <option>Carina</option>
    <option>Sandra und Toni</option>
    <option>Ilona</option>
    <option>Günter</option>
    <option>Gudrun</option>
    <option>Ernesto</option>
    <option>Birgit</option>
    <option>Sarah und Bjarne</option>
    </select></form>

    <script language="Javascript">
    <!-- Start
    function update_auswahl()
    {
    var kategorieAuswahl = document.forms.verzeichnis.kategorie;
    var unterkategorieAuswahl = document.forms.verzeichnis.unterkategorie;
    unterkategorieAuswahl.options.length = 0; // DropDown Menü entleeren   
      
       if (kategorieAuswahl.options
    [kategorieAuswahl.selectedIndex].
    value == "Österreich")
    {
    unterkategorieAuswahl.options[0] = new Option("Wien");
    unterkategorieAuswahl.options[1] = new Option("St. Pölten");
    unterkategorieAuswahl.options[2] = new Option("Krems");
    unterkategorieAuswahl.options[3] = new Option("Stockerau/Ernstbrunn");
    }
    else if (kategorieAuswahl.options
    [kategorieAuswahl.selectedIndex].
    value == "Deutschland")
    {
    unterkategorieAuswahl.options[0] = new Option("Köln");
    }
    }
    // Ende -->
    </script>

 

[SpiceLab]

Da hast Du Dir offensichtlich die falsche Arbeitsvorlage aus dem Netz gefischt, denn schon das integrierte Live-Demo im Original https://www.drweb.de/magazin/javascript-dynamische-dropdown-menus/ hält überhaupt nicht das, was der Tutor (Anm. d. Red.: Kurzform für Autor eines Tutorials) da von sich gibt.

https://css-tricks.com/dynamic-dropdowns/
-> Demo: http://css-tricks.com/examples/DynamicDropdown/
-> Download: http://css-tricks.com/examples/DynamicDropdown.zip

Achtung: Auf Umlaute in ihrer Reinform sollte im JS-Code verzichtet werden!

[edit]Tipp-Ex[/edit]​