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

Question

I am using this code in order to customize a drop-down list Selector. Is there a way I can reset this code without having to reload the page by calling a function by pressing a button.

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

Ex. If "Jaguar" is selected, when the button is pressed, the selected element should change back to the orginal "Select car:" 0 option.

reset = function() {

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

}

Answer 1

When reseting, what you want is to put the first option text into the select-selected div (which is the one that shows the current selected option) and also update the select selected index.

Also, you want to remove same-as-selected class from the selected 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');
}