javascript - 重置自定义 JavaScript 下拉列表而不刷新页面

Question

我正在使用this代码以便自定义下拉列表选择器。有没有一种方法可以重置此代码，而无需通过按下按钮调用函数来重新加载页面。

<button onclick="reset();">Reset</button>

例如。如果选择“Jaguar”，则按下按钮时，所选元素应变回原来的“选择汽车:”0 选项。

reset = function() {

  // Set default option to "Select car:" (0)

}

Answer 1

重置时，您想要的是将第一个 option 文本放入 select-selected div(即显示当前选定选项的那个)中，并且更新select所选索引。

此外，您想要从所选 div 中删除 same-as-selected 类:

function reset() {
    var customSelect = document.getElementsByClassName("custom-select")[0];
    var select = customSelect.getElementsByTagName("select")[0];
    var selected = customSelect.getElementsByClassName("select-selected")[0];
    var selectedItem = customSelect.getElementsByClassName('same-as-selected')[0];

    select.selectedIndex = 0;
    selected.innerHTML = select.options[select.selectedIndex].innerHTML;
    selectedItem.classList.remove('same-as-selected');
}