Javascript 自定义JS/CSS选择不带jquery的备选方案

我正试图做一个自定义选择，就像，但没有jquery，我只是不想为一件事导入一个全新的库。我做到了，直到，但我不知道我如何才能作出选择与常规JS。如何从列表中选择内容？

您需要定义li元素的onclick处理程序。在HTML或JS中，通过使用li元素循环通过div容器的子级

---

如果要在鼠标悬停时突出显示所选项目，还需要定义onmouseover和onmouseout处理程序。

如果只想在下拉列表中显示所选项目

您需要按如下方式包装要在中显示的文本

<div class="label"><span>Select Element</span><b class="button">▾</b>
</div>

听你的选项点击

---

旁注。我不建议使用内联处理程序。改用addEventListener。

定义选择。当你选择..时会发生什么？好吧，听选项点击。定义单击了哪个选项，并将其html作为值处理。我不明白你为什么要更改它。看起来像是vanila select，没有添加新功能按文本过滤

var dd = document.querySelector('.label span');
var options = document.querySelectorAll('div.hidden ul li');
for (var i = 0; i < options.length; i++) {
    options[i].onclick = select;
}

function show() {
 var selectbox = document.getElementById("options");
 if (selectbox.className == "hidden") {
   selectbox.setAttribute("class", "visible");
 } else {
        selectbox.setAttribute("class", "hidden");
 }
}

function select() {
 dd.innerHTML = this.innerHTML;
}

function choose(ev, el) {
    var options = el, target = ev.target,
        value = ev.target.innerHTML;

    options.setAttribute('class', 'hidden');
    options.parentElement.querySelector('.label').innerHTML = value;
}

<div id="options" class="hidden" onclick='choose (event, this);'>