重置自定义JavaScript下拉列表（不带页面引用）

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

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

---

重置时，您需要将第一个

选项

文本放入

选择的

div（显示当前选择的选项）中，并更新

选择的索引

另外，您要从所选div中删除与所选类相同的
：

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

谢谢你的回答。这将重置
div class select 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');
}