1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen

Dynamisches DropDown mit mehreren Untermenüs

Dieses Thema im Forum "Javascript & Ajax" wurde erstellt von Amphestrite, 31. Dezember 2016.

  1. Amphestrite

    Amphestrite Grünschnabel

    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
     

    Anhänge:

  2. SpiceLab

    SpiceLab ZENmechanic Premium-User

    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]
     
    Zuletzt bearbeitet: 31. Dezember 2016
  3. Amphestrite

    Amphestrite Grünschnabel

    Code (Text):
    1. <form name="verzeichnis">
    2.     <select size="1" name="kategorie" onchange="update_auswahl()">
    3.  
    4.     <option value="Auswahl" selected>Auswahl</option>
    5.     <option value="Österreich">Österreich</option>
    6.     <option value="Deutschland">Deutschland</option> </select>
    7.  
    8.     <select size="1" name="unterkategorie">
    9.     <option selected>Auswahl</option>
    10.     <option>Wien</option>
    11.     <option>St. Pölten</option>
    12.     <option>Krems</option>
    13.     <option>Stockerau/Ernstbrunn</option>
    14.     <option>Köln</option>
    15.     </select></form>
    16.  
    17.     <select size="1" name="unterkategorie2">
    18.     <option selected>Auswahl</option>
    19.     <option>Harry</option>
    20.     <option>Nicole</option>
    21.     <option>Sabine</option>
    22.     <option>Carina</option>
    23.     <option>Sandra und Toni</option>
    24.     <option>Ilona</option>
    25.     <option>Günter</option>
    26.     <option>Gudrun</option>
    27.     <option>Ernesto</option>
    28.     <option>Birgit</option>
    29.     <option>Sarah und Bjarne</option>
    30.     </select></form>
    31.  
    32.     <script language="Javascript">
    33.     <!-- Start
    34.     function update_auswahl()
    35.     {
    36.     var kategorieAuswahl = document.forms.verzeichnis.kategorie;
    37.     var unterkategorieAuswahl = document.forms.verzeichnis.unterkategorie;
    38.     unterkategorieAuswahl.options.length = 0; // DropDown Menü entleeren  
    39.      
    40.        if (kategorieAuswahl.options
    41.     [kategorieAuswahl.selectedIndex].
    42.     value == "Österreich")
    43.     {
    44.     unterkategorieAuswahl.options[0] = new Option("Wien");
    45.     unterkategorieAuswahl.options[1] = new Option("St. Pölten");
    46.     unterkategorieAuswahl.options[2] = new Option("Krems");
    47.     unterkategorieAuswahl.options[3] = new Option("Stockerau/Ernstbrunn");
    48.     }
    49.     else if (kategorieAuswahl.options
    50.     [kategorieAuswahl.selectedIndex].
    51.     value == "Deutschland")
    52.     {
    53.     unterkategorieAuswahl.options[0] = new Option("Köln");
    54.     }
    55.     }
    56.     // Ende -->
    57.     </script>
     
  4. SpiceLab

    SpiceLab ZENmechanic Premium-User

    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]
     
    Zuletzt bearbeitet: 31. Dezember 2016
Die Seite wird geladen...