Ankündigung

Einklappen
Keine Ankündigung bisher.

2tes Dropdown abhängig vom ersten

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • 2tes Dropdown abhängig vom ersten

    Hallo zusammen,

    ich habe ein kleines Dropdownmenü (https://www.w3schools.com/howto/howto_custom_select.asp) eingebaut, was auch sehr gut funktioniert:

    Code:
     
    <select name="hauptkategorie2" size="1"> <option value="1">Nicht ausgewählt</option> <option value="2" selected="selected">Handwerk Innenarbeiten</option> <option value="3">Handwerk Außenarbeiten</option> <option value="4">Planung und Begutachtung</option> <option value="5">Umzug und Haushaltsauflösung</option> <option value="6">Fotografie und Digitaldruck</option> </select>


    Ich habe es mit folgenden Javascript und CSS Code grafisch gestalten:

    Code:
     
    .dropdown { position: relative; font-family: Arial; border-bottom: 1px solid #4e4f4f; } .dropdown select { display: none; } .select-selected { background-color: white; } .select-items div,.select-selected { color: #676767; padding: 15px; border-right: 1px solid #4e4f4f; border-left: 1px solid #4e4f4f; border-top: 1px solid #4e4f4f; cursor: pointer; user-select: none; } .select-items { position: absolute; background-color: white; top: 100%; left: 0; right: 0; z-index: 99; border-bottom: 1px solid #4e4f4f; } .select-hide { display: none; } .select-items div:hover, .same-as-selected { background-color: rgba(0, 0, 0, 0.1); }
    Code:
     
    var x, i, j, selElmnt, a, b, c; /*look for any elements with the class "dropdown":*/ x = document.getElementsByClassName("dropdown"); for (i = 0; i < x.length; i++) { selElmnt = x[i].getElementsByTagName("select")[0]; /*for each element, create a new DIV that will act as the selected item:*/ a = document.createElement("DIV"); a.setAttribute("class", "select-selected"); a.innerHTML = selElmnt.options[selElmnt.selectedIndex].innerHTML; x[i].appendChild(a); /*for each element, create a new DIV that will contain the option list:*/ b = document.createElement("DIV"); b.setAttribute("class", "select-items select-hide"); for (j = 0; j < selElmnt.length; j++) { /*for each option in the original select element, create a new DIV that will act as an option item:*/ c = document.createElement("DIV"); c.innerHTML = selElmnt.options[j].innerHTML; c.addEventListener("click", function(e) { /*when an item is clicked, update the original select box, and the selected item:*/ var y, i, k, s, h; s = this.parentNode.parentNode.getElementsByTagName("s elect")[0]; h = this.parentNode.previousSibling; for (i = 0; i < s.length; i++) { if (s.options[i].innerHTML == this.innerHTML) { s.selectedIndex = i; h.innerHTML = this.innerHTML; y = this.parentNode.getElementsByClassName("same-as-selected"); for (k = 0; k < y.length; k++) { y[k].removeAttribute("class"); } this.setAttribute("class", "same-as-selected"); break; } } h.click(); }); b.appendChild(c); } x[i].appendChild(b); a.addEventListener("click", function(e) { /*when the select box is clicked, close any other select boxes, and open/close the current select box:*/ e.stopPropagation(); closeAllSelect(this); this.nextSibling.classList.toggle("select-hide"); this.classList.toggle("select-arrow-active"); }); } function closeAllSelect(elmnt) { /*a function that will close all select boxes in the document, except the current select box:*/ var x, y, i, arrNo = []; x = document.getElementsByClassName("select-items"); y = document.getElementsByClassName("select-selected"); for (i = 0; i < y.length; i++) { if (elmnt == y[i]) { arrNo.push(i) } else { y[i].classList.remove("select-arrow-active"); } } for (i = 0; i < x.length; i++) { if (arrNo.indexOf(i)) { x[i].classList.add("select-hide"); } } } /*if the user clicks anywhere outside the select box, then close all select boxes:*/ document.addEventListener("click", closeAllSelect);


    Jetzt möchte ich die Options von einem zweiten Dropdownmenü abhängig von der Auswahl des ersten Dropdownmenüs machen.

    leider klappt onchange="" jetzt nicht mehr, da ja das Original select unsichtbar ist.
    Ich kann leide rauch kein Javascript und steig bei dem Code garnicht durch.

    Kann mir wer helfen?

    Liebe Grüße


  • #2
    Was heisßt den abhängig vom ersten ? Da gibt es mehrer möglichkeiten. mit arrays oder case oder vieleicht eine Bibiliothek von Jquery gibt es da auch,weiß aber gerade nicht wie die heißt.

    Wenn du genaue angaben machst was passieren soll wenn man was aussucht ,dann kann man dir besser helfen bzw was schreiben
    html,js,css,php Soforthilfe Forum

    Kommentar


    • #3
      Hallo Basti,

      ich habe 2 Dropdownmenüs "Hauptkategorie" und "Unterkategorie".

      Wenn ich Beispielsweise in Select Hauptkategorie "Autos" auswähle, sollen im Select Unterkategorie verschiedene Automarken drinstehen.
      Wenn ich Beispielsweise in Select Hauptkategorie "Farben" auswähle, sollen im Select Unterkategorie verschiedene Farben drinstehen.

      Kommentar


      • #4
        Ajax ist das Stichwort.
        Nach Auswahl im ersten Dropdown einen Request an ein Serverscript, das im Idealfall das fertige HTML für die zweite Dropdown liefert oder eben die entsprechenden Daten, um das Select aufzubauen.
        Competence-Center -> Enjoy the Informatrix
        PHProcks!Einsteiger freundliche Tutorials

        Kommentar


        • #5
          Leider kann ich kein Ajax oder Javascript.

          ich dachte eigentlich, ich könnte mit Onchange="" dann die jeweiligen <option> anzeigen lassen, aber das geht ja leider nicht, jetz weis ich nicht wie ich das mit dem Script oben hinbekommen soll.

          Kommentar


          • #6
            Man kommt nicht so einfach durch deinen js Code durch, ist echt mies gepostet
            Ich habe gerade auch die Leerzeichen nochmals "von Hand" einfügen müssen, unsere Tolle Forumssoftware kann sowas nicht (mehr).
            das habe ich mir mal zusammmengesucht, oin deer Hoffnung es gehört auch zusammen.
            Code:
             /*for each element, create a new DIV that will act as the selected item:*/
            
            a = document.createElement("DIV");  
            a.setAttribute("class", "select-selected");
            a.innerHTML = selElmnt.options[selElmnt.selectedIndex].innerHTML;  
            
             /*when the select box is clicked, close any other select boxes and open/close the current select box:*/  
            
            a.addEventListener("click", function(e) {    
                e.stopPropagation();    
                closeAllSelect(this);    
                this.nextSibling.classList.toggle("select-hide");    
                this.classList.toggle("select-arrow-active");
            });  
            
             x[i].appendChild(a);  
            // und weiter ....  
            c = document.createElement("DIV");
            c.innerHTML = selElmnt.options[j].innerHTML;
            c.addEventListener("click", function(e) {
                // do something else
            });
            Du machst ein Div, und wenn auf das geklcikt wird, dann ...?

            mach ein click handler auf den parent und werte aus, wo geklickt wurde ->

            https://molily.de/js/event-handling-effizient.html

            Du kannst mehrere dropdowns voneinader abhängig machen, indem Du sie einfach auf sichtbar schaltest, fals die information für diese schon vorliegt.
            Ich sehe hier keinen zwingenden Grund für Ajax.
            zudem würde ich Dir clientseitig zu einer Templete engine raten, das ganze create Element append element ist nicht gerade einfach zu durchschaun.

            Kommentar


            • #7
              oder eine einfachere art wäre so
              https://codepen.io/basti1012/pen/NMpKoR

              habe das nach deinen post3 gemacht ,so wie ich das sehe solllte das reichen
              html,js,css,php Soforthilfe Forum

              Kommentar


              • #8
                Je nach Anwendung kannst du das auch als Dropdown Navigation realisieren, da du ja nur 5 Hauptkategorien hast.

                Eine Anleitung dazu findest du bei https://www.drweb.de/responsives-css...ne-javascript/

                Da du kein Javascript kannst, ist das vielleicht leichter für dich.

                Kommentar


                • #9
                  Hallo zusammen,

                  basti1012
                  vielen Dank für deine Mühe und das Script.

                  Leider funktioniert das bei mir nicht, weil ja mein original Select verborgen ist und onchange nicht mehr funkltioniert.

                  LG

                  Kommentar


                  • #10
                    Zitat von ederande Beitrag anzeigen

                    Leider funktioniert das bei mir nicht, weil ja mein original Select verborgen ist und onchange nicht mehr funkltioniert.

                    LG
                    Das verstehe ich leider nicht.Wenn ich das checken würde ,könnte man auch bestimmt dafür eine Lösung finden
                    html,js,css,php Soforthilfe Forum

                    Kommentar


                    • #11
                      Aber du wildst es nicht checken oder?

                      Ansonsten könntest du mal das Script von der Anleitung kopieren und es versuchen.

                      Ich frag mich wie das andere machen.

                      Kommentar


                      • #12
                        Andere machen das so wie im Beitrag #6.

                        Mein Vorschlag wäre: Nimm ein normales Select, style es ein bisschen mit CSS und benutze dann den change-Event. Du ersparst dir viel Ärger.

                        Kommentar


                        • #13
                          Okay, ich hab es jetzt selbst gelöst.

                          Ich muss sagen, JavaScript macht richtig Spaß.

                          Kommentar


                          • #14
                            Zitat von ederande Beitrag anzeigen
                            Okay, ich hab es jetzt selbst gelöst.

                            Ich muss sagen, JavaScript macht richtig Spaß.
                            Und wie ?
                            Üblicherweise postet man Lösungen nach Fragen in einem Forum!

                            Kommentar


                            • #15
                              Ihr würdet die Hände über den Kopf schlagen

                              Ich hab mit Javascript, CSS und HTML <ul><li></li><ul> ein Dropdown Menü gebastelt und da Ergebnis wird per Get übertragen.

                              Kommentar

                              Lädt...
                              X