очистка значений комбобоксов

Question

очистка значений комбобоксов

Рейтинг: 0Ответов: 2Опубликовано: 21.07.2023

У меня есть несколько комбобоксов, в которых при загрузке страницы отражается первый элемент списка select. В процессе работы пользователь меняет значения комбобоксов, затем нажимает кнопку "проверить", получает результат и переходит к новой задаче на этой же странице (решение новой задачи он записывает в эти же комбобоксы). Поскольку страница не обновляется, в комбобоксах остаются ранее выбранные значения, и при решении новой задачи это несколько напрягает. Можно ли с помощью JavaScript внутри функции обратиться ко всем комбобоксам (например, по их ID) и "обнулить" их значения (то есть вернуть в окно комбобокса первое значение из списка)? Пробовал сделать так:

function cBoxesCleaner(){
    let answer1 = document.getElementById("cBox1").innerHTML;
    answer1.value = "-"; // символ "-" является первым значением всех комбобоксов
    let answer2 = document.getElementById("cBox2").innerHTML;
    answer2.value = "-";
}

К сожалению, не сработало. Подскажите, пожалуйста, как можно решить проблему?

javascript html combobox

Источник: Stack Overflow на русском

Answer 1

▲ 1

Уберите innerHTML и заработает.

function cBoxesCleaner(){
    let answer1 = document.getElementById("cBox1");
    answer1.value = "-";
    let answer2 = document.getElementById("cBox2");
    answer2.value = "-";
}

Для выбора нужного вам варианта в select необходимо изменить value на значение value выбираемого элемента. Если у элемента value="1", то для выбора этого варианта сделайте так: select.value = "1"

const select = document.querySelector(".select");
const button = document.querySelector(".button");

button.addEventListener('click', () => {
  select.value = "1";
})

<select class="select">
  <option value=" ">-</option>
  <option value="1">вар1</option>
  <option value="2">вар2</option>
</select>

<button class="button">Эта кнопка задаёт select.value="1"</button>

Answer 2

▲ 0

Огромное спасибо, Logos! Ваш вариант сработал, но есть одно существенное дополнение. Чекбоксов было 5, им был присвоен класс "cBox". Интересно, что при нажатии на кнопку значение менялось только у первого чекбокса. Пришлось добавить им еще один класс (свой для каждого из пяти ответов) и продублировать код с учётом всех пяти классов. В итоге рабочий вариант выглядит примерно так (чтобы не писать лишнего, оставил 2 чекбокса): HTML:

<select class="cBox Mult" onchange=getUserD()>
<option value=" ">-</option>
<option value="вар1"> вариант1 </option>
<option value="вар2"> вариант2 </option>
</select>

<select class="cBox Nos" onchange=getUserD()>
<option value=" ">-</option>
<option value="вар2"> вариант1 </option>
<option value="вар2"> вариант2 </option>
</select>

JavaScript:

const select1 = document.querySelector(".Mult");
const select2 = document.querySelector(".Nos");

button.addEventListener('click', () => {
  select1.value = " ";
  select2.value = " ";
})

очистка значений комбобоксов

Ответы