Сбросить пользовательский JavaScript раскрывающийся список без обновления страницы

Question

Я использую этот код для настройки выпадающего списка Selector. Есть ли способ, которым я могу сбросить этот код без перезагрузки страницы, вызвав функцию, нажав кнопку.

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

Пример. Если выбран «Ягуар», то при нажатии кнопки выбранный элемент должен вернуться к исходному варианту «Выбор автомобиля: 0».

reset = function() {

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

}

Answer 1

При сбросе вам нужно поместить первый option текст в select-selected div (который показывает текущий выбранный параметр), а также обновить select выбранный индекс.

Также вы хотите удалить same-as-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');
}