2

Есть автоматически сгенерированный список с уже установленным атрибутом selected, такой код генерится по-умолчанию для посетителей:

<select id="size">
  <option value="10">10</option>
  <option selected="selected" value="20">20</option>
  <option value="30">30</option>
</select>

Необходимо переставить атрибут selected со второго пункта на любой другой (скажем, на третий) при загрузке страницы.
Библиотека jQuery для работы не доступна.

0

4 ответа 4

2

Просто установка значения в select

Для того чтобы установить для select опцию используйте свойство value:

document.querySelector("#size").value = "30";
<select id="size">
  <option value="10">10</option>
  <option selected="selected" value="20">20</option>
  <option value="30">30</option>
</select>

Модификация DOM

Если вам надо именно модифицировать DOM и установить selected нужной опции, то для этого можно воспользоваться следующим кодом:

document.querySelector("#size > option[selected]").removeAttribute("selected");
document.querySelector("#size > option[value='30']").setAttribute("selected", "selected");
<select id="size">
  <option value="10">10</option>
  <option selected="selected" value="20">20</option>
  <option value="30">30</option>
</select>

1
  • Благодарю, код срабатывает, в части модификации DOM, однако значение value не передается в форму =( почему-то был уверен, что модификация при загрузке этого параметра будет аналогичная "ручной" активации пользователем... попробовал немного модицифировать: document.querySelector("#size > option[value='30']").click();. но не срабатывает...
    – ttyd0
    17 янв 2017 в 1:40
2

window.addEventListener('load', function() {
  document.getElementById('size').querySelectorAll('option')[2].selected = true;
});
<select id="size">
  <option value="10">10</option>
  <option selected="selected" value="20">20</option>
  <option value="30">30</option>
</select>

0
1

window.onload = function() {
    document.getElementById('size').value = '30'
}
<select id="size">
<option value="10">10</option>
<option selected="selected" value="20">20</option>
<option value="30">30</option>
</select>

1
function setSelect(newSelectNum) {

    var select = document.getElementById('size');
    var options = select.getElementsByTagName('option');

    // сбрасываем старый
    for (var i = 0, l = options.length; i < l; i++) {
      var option = options[i]; 
      if (option.getAttribute('selected') === 'selected') {
          option.removeAttribute('selected');
      }
    }

    // устанавливаем новый
    options[newSelectNum].setAttribute('selected', 'selected');
}
2
  • Слишком большой код для такой простой задачи. Цикл можно вообще бесполезен. Он меняет для выбранной опции "selected"="selected" на пустой атрибут "selected". 16 янв 2017 в 8:26
  • @VadimOvchinnikov, да, согласен, но как пример )
    – Sublihim
    16 янв 2017 в 8:35

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.