Hallo zusammen,
ich habe ein kleines Dropdownmenü (https://www.w3schools.com/howto/howto_custom_select.asp) eingebaut, was auch sehr gut funktioniert:
Ich habe es mit folgenden Javascript und CSS Code grafisch gestalten:
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
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
Kommentar