Как я могу установить значение по умолчанию для элемента HTML <select>с JavaScript? - PullRequest
Новая
       36

Как я могу установить значение по умолчанию для элемента HTML <select>с JavaScript?

0 голосов
/ 05 мая 2020

Как установить значение 'selected' (по умолчанию) для элемента HTML <select> с помощью JavaScript. Ака. в настоящее время option0 является 'selected', как запустить сценарий, чтобы изменить его для отображения значения, которое я хочу?

это, например, потому что это значение ранее сохранено в базе данных, и я хочу только его обновлять если пользователь действительно указывает это сделать. Но если я не укажу значение (повторно выбрав предыдущий параметр), при сохранении «редактирования» предыдущее значение будет заменено значением «выбрано по умолчанию», с которым загружается <select>. 

<select id="selector" name="selector">
  <option id="option0" value="0" selected=true >default </option>
  <option id="option1" value="1">option 1 </option>
  <option id="option1" value="2">option 2 </option>
  <option id="option1" value="3">option 3 </option>
  <option id="option1" value="4">option 4 </option>
</select>

ПРИМЕЧАНИЕ : Поскольку мне не хватает репутации, чтобы добавить свой ответ (ниже) в общую ветку на этом топи c, вот решение, которое я использовал javascript, , чтобы установить параметр, который будет отображаться / выбираться в селекторе. Это также может быть <% = value%> из базы данных.

Ответы [ 3 ]

0 голосов
/ 05 мая 2020

Используйте свойство value, чтобы установить новое выбранное значение, используя JavaScript

document.getElementById('selector').value="2";
<select id="selector" name="selector">
  <option id="option0" value="0" selected=true >default </option>
  <option id="option1" value="1">option 1 </option>
  <option id="option1" value="2">option 2 </option>
  <option id="option1" value="3">option 3 </option>
  <option id="option1" value="4">option 4 </option>
</select>
0 голосов
/ 05 мая 2020 
<script> 
    let options = document.getElementsByTagName('option');

    for(i=0; i<options.length; i++){
        if (options[i].value === "<%= or_some_string %>"){
            options[i].selected = true;
        }
    } 
</script>

Мы получаем все параметры (это коллекция html) и перебираем его, чтобы проверить, равен ли какой-либо параметр "String" или "<% = string_value_from_database%>". И установите для него .selected значение true.

ПРИМЕЧАНИЕ - МОЖЕТ БЫТЬ ЛУЧШЕ - DEFFO SHORTER: с помощью комментариев: 

<script>
  let to_select = document.getElementById('selector');
  to_select.value = "<%= value %>";
</script>

Где to_select.value либо установлено к желаемому значению или к значению базы данных. Обратите внимание, вам может понадобиться или не понадобится ".." вокруг установленного вами значения, в зависимости от настройки <select> и того, как вы сохранили свои данные.

0 голосов
/ 05 мая 2020

используйте это 

document.getElementById("selector").selectedIndex = 3;

оригинал

...