自定义选择下拉菜单中的 onchange 不起作用

Question

我已经参考以下教程实现了自定义选择下拉列表。

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_custom_select

但问题是onchange不适用于选择下拉列表。

<div class="custom-select-dropdown">
    <select id="agro-time-period" onchange="agroTimePeriod()" class="custom-input">
       <option disabled selected hidden value="">Ex: Year 2020</option>
           {% for time in agro_time_periods %}
              <option value="{{time.code}},{{time.name}}">{{time.name}}</option>
           {% endfor %}
    </select>
</div>

这可能是什么原因？

Answer 1

您在此任务中的问题并不完全清楚。 你没有报告什么不适合你。 我从您提供的源代码中获取了代码，并使用了custom-select-dropdown类而不是custom-select类。 此外，我对css进行了编辑，更改了您指示的类的名称。 并从标签中删除onchange="agroTimePeriod()"事件。

然而，不是option和select ，而是在输出处生成一个div 。

有必要吗？

 var x, i, j, l, ll, selElmnt, a, b, c; x = document.getElementsByClassName("custom-select-dropdown"); l = x.length; for (i = 0; i < l; i++) { selElmnt = x[i].getElementsByTagName("select")[0]; ll = selElmnt.length; a = document.createElement("DIV"); a.setAttribute("class", "select-selected"); a.innerHTML = selElmnt.options[selElmnt.selectedIndex].innerHTML; x[i].appendChild(a); b = document.createElement("DIV"); b.setAttribute("class", "select-items select-hide"); for (j = 1; j < ll; j++) { c = document.createElement("DIV"); c.innerHTML = selElmnt.options[j].innerHTML; c.addEventListener("click", function(e) { 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) { e.stopPropagation(); closeAllSelect(this); this.nextSibling.classList.toggle("select-hide"); this.classList.toggle("select-arrow-active"); }); } function closeAllSelect(elmnt) { 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"); } } } document.addEventListener("click", closeAllSelect);

 .custom-select-dropdown { position: relative; font-family: Arial; } .custom-select-dropdown select { display: none; } .select-selected { background-color: DodgerBlue; } .select-selected:after { position: absolute; content: ""; top: 14px; right: 10px; width: 0; height: 0; border: 6px solid transparent; border-color: #fff transparent transparent transparent; } .select-selected.select-arrow-active:after { border-color: transparent transparent #fff transparent; top: 7px; } .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; } .select-items { position: absolute; background-color: DodgerBlue; top: 100%; left: 0; right: 0; z-index: 99; } .select-hide { display: none; } .select-items div:hover, .same-as-selected { background-color: rgba(0, 0, 0, 0.1); }

 <div class="custom-select-dropdown"> <select id="agro-time-period" class="custom-input"> <option disabled selected hidden value="">Ex: Year 2020</option> <option value="{{time.code}},{{time.name}}">{{time.name}}</option> </select> </div>