html 自定義 select onchange 事件未觸發

Question

我有以下從https://www.w3schools.com/howto/tryit.asp?filename=tryhow_custom_select 獲取的代碼。 我必須使用自定義 select 輸入並且需要在 onchange 事件上調用 function 。 當我更改 select 選項時，不會觸發 onchange 事件。

可能是什么問題？ 怎么可能？

 function fruitSelected(ele){ alert("fruitSelected"); } function carSelected(ele){ alert("carSelected"); } var x, i, j, l, ll, selElmnt, a, b, c; /*look for any elements with the class "custom-select":*/ x = document.getElementsByClassName("custom-select"); l = x.length; for (i = 0; i < l; i++) { selElmnt = x[i].getElementsByTagName("select")[0]; ll = selElmnt.length; /*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 = 1; j < ll; 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, sl, yl; s = this.parentNode.parentNode.getElementsByTagName("select")[0]; sl = s.length; h = this.parentNode.previousSibling; for (i = 0; i < sl; i++) { if (s.options[i].innerHTML == this.innerHTML) { s.selectedIndex = i; h.innerHTML = this.innerHTML; y = this.parentNode.getElementsByClassName("same-as-selected"); yl = y.length; for (k = 0; k < yl; 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, xl, yl, arrNo = []; x = document.getElementsByClassName("select-items"); y = document.getElementsByClassName("select-selected"); xl = x.length; yl = y.length; for (i = 0; i < yl; i++) { if (elmnt == y[i]) { arrNo.push(i) } else { y[i].classList.remove("select-arrow-active"); } } for (i = 0; i < xl; 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);

 .custom-select { position: relative; font-family: Arial; }.custom-select select { display: none; /*hide original SELECT element:*/ }.select-selected { background-color: DodgerBlue; } /*style the arrow inside the select element:*/.select-selected:after { position: absolute; content: ""; top: 14px; right: 10px; width: 0; height: 0; border: 6px solid transparent; border-color: #fff transparent transparent transparent; } /*point the arrow upwards when the select box is open (active):*/.select-selected.select-arrow-active:after { border-color: transparent transparent #fff transparent; top: 7px; } /*style the items (options), including the selected item:*/.select-items div,.select-selected { color: #ffffff; padding: 8px 16px; border: 1px solid transparent; border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent; cursor: pointer; user-select: none; } /*style items (options):*/.select-items { position: absolute; background-color: DodgerBlue; top: 100%; left: 0; right: 0; z-index: 99; } /*hide the items when the select box is closed:*/.select-hide { display: none; }.select-items div:hover, .same-as-selected { background-color: rgba(0, 0, 0, 0.1); }

 <h2>Custom Select</h2> <.--surround the select box with a "custom-select" DIV element: Remember to set the width:--> <div class="custom-select" style="width;200px:"> <select onchange= "carSelected(this)"> <option value="0">Select car:</option> <option value="1">Audi</option> <option value="2">BMW</option> </select> </div> <div class="custom-select" style="width;200px:float;right:"> <select <select onchange= "fruitSelected(this)">> <option value="0">Select Fruit:</option> <option value="1">Apple</option> <option value="2">Orange</option> </select> </div> </body> </html>

Answer 1

I see you have typos in your html in the select tag, space after the = sign and the select withtin a select with < > . 確保模板干凈。

另外，請確保在模板之后加載 JS（包括 body 標簽末尾的 JS）。

您還可以通過編程方式掛鈎更改，使用addEventListener運行您的方法： https://www.w3schools.com/jsref/met_element_addeventlistener.asp