javascript - 没有 jquery 的自定义 JS/CSS 选择替代方案

Question

我正在尝试像 this 一样进行自定义选择，但没有 jquery(我只是不想为一件事情导入一个全新的库)。我做到了 this ，但我不知道如何使用常规 JS 进行选择。如何从列表中选择内容？

Answer 1

如果只想在下拉列表中显示选中的元素，

您需要将要显示的文本包装在 <span> 中如下

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

然后你可以把它改成innterHTML使用以下js显示所选元素:

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;
}

Demo