Как программно установить значение элемента select box, используя JavaScript?

Question

У меня есть следующий элемент HTML <select>:

<select id="leaveCode" name="leaveCode">
  <option value="10">Annual Leave</option>
  <option value="11">Medical Leave</option>
  <option value="14">Long Service</option>
  <option value="17">Leave Without Pay</option>
</select>

Используя функцию JavaScript с номером leaveCode в качестве параметра, как выбрать соответствующую опцию в списке?

Answer 1

SelectElement("leaveCode", valueToSelect)

function SelectElement(id, valueToSelect)
{    
    var element = document.getElementById(id);
    element.value = valueToSelect;
}

Answer 2

Если вы используете jQuery, вы также можете сделать это:

$('#leaveCode').val('14');

Это выберет <option> со значением 14.

---

С простым Javascript это также может быть достигнуто с помощью двух Document методов :

• С помощью document.querySelector вы можете выбрать элемент на основе селектора CSS:

  document.querySelector('#leaveCode').value = '14'
  

• Используя более устоявшийся подход с document.getElementById(), который, как следует из названия функции, позволит вам выбрать элемент на основе id:

  document.getElementById('leaveCode').value = '14'
  

Вы можете запустить приведенный ниже код, чтобы увидеть эти методы и функцию jQuery в действии:

const jQueryFunction = () => {
  
  $('#leaveCode').val('14'); 
  
}

const querySelectorFunction = () => {
  
  document.querySelector('#leaveCode').value = '14' 
  
}

const getElementByIdFunction = () => {
  
  document.getElementById('leaveCode').value='14' 
  
}

input {
  display:block;
  margin: 10px;
  padding: 10px
}

<select id="leaveCode" name="leaveCode">
  <option value="10">Annual Leave</option>
  <option value="11">Medical Leave</option>
  <option value="14">Long Service</option>
  <option value="17">Leave Without Pay</option>
</select>

<input type="button" value="$('#leaveCode').val('14');" onclick="jQueryFunction()" />
<input type="button" value="document.querySelector('#leaveCode').value = '14'" onclick="querySelectorFunction()" />
<input type="button" value="document.getElementById('leaveCode').value = '14'" onclick="getElementByIdFunction()" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 3

function setSelectValue (id, val) {
    document.getElementById(id).value = val;
}
setSelectValue('leaveCode', 14);

Answer 4

Не отвечая на вопрос, но вы также можете выбрать по индексу, где i - индекс элемента, который вы хотите выбрать:

var formObj = document.getElementById('myForm');
formObj.leaveCode[i].selected = true;

Вы также можете перебирать элементы для выбора по отображаемому значению с помощью цикла:

for (var i = 0, len < formObj.leaveCode.length; i < len; i++) 
    if (formObj.leaveCode[i].value == 'xxx') formObj.leaveCode[i].selected = true;

Answer 5

Я сравнил разные методы:

Сравнение различных способов установки значения выбора с помощью JS или jQuery

Код:

$(function() {
    var oldT = new Date().getTime();
     var element = document.getElementById('myId');
    element.value = 4;
    console.error(new Date().getTime() - oldT);


    oldT = new Date().getTime();
    $("#myId option").filter(function() {
        return $(this).attr('value') == 4;
    }).attr('selected', true);
    console.error(new Date().getTime() - oldT);


    oldT = new Date().getTime();
    $("#myId").val("4");
    console.error(new Date().getTime() - oldT);


});

Вывод на выборку с ~ 4000 элементами:

1 мс

58 мс

612 мс

С Firefox 10. Примечание. Единственная причина, по которой я прошел этот тест, заключалась в том, что jQuery работал очень плохо в нашем списке с ~ 2000 записями (у них были более длинные тексты между параметрами). У нас была задержка примерно на 2 с после val ()

Также обратите внимание: я устанавливаю значение в зависимости от реального значения, а не от значения текста

Answer 6

document.getElementById('leaveCode').value = '10';

Это должно установить выбор "Ежегодный отпуск"

Answer 7

Я пробовал вышеупомянутые решения на основе JavaScript / jQuery, такие как:

$("#leaveCode").val("14");

и

var leaveCode = document.querySelector('#leaveCode');
leaveCode[i].selected = true;

в приложении AngularJS, где требовался обязательный

Ни одна из них не работает, потому что проверка формы AngularJS не запускается. Хотя была выбрана правильная опция (и она отображается в форме), ввод оставался недействительным (классы ng-нетронуты и ng-invalid все еще присутствуют).

Для принудительной проверки AngularJS вызовите jQuery change () после выбора опции:

$("#leaveCode").val("14").change();

и

var leaveCode = document.querySelector('#leaveCode');
leaveCode[i].selected = true;
$(leaveCode).change();

Answer 8

Самый простой способ, если вам нужно:
1) Нажмите кнопку, которая определяет опцию выбора
2) Перейти на другую страницу, где опция выбора
3) Выберите значение этого параметра на другой странице

1) ссылки на ваши кнопки (скажем, на главной странице)

<a onclick="location.href='contact.php?option=1';" style="cursor:pointer;">Sales</a>
<a onclick="location.href='contact.php?option=2';" style="cursor:pointer;">IT</a>

(где contact.php - это ваша страница с опциями выбора. Обратите внимание, что у URL страницы есть? Option = 1 или 2)

2) поместите этот код на вторую страницу (мой случай contact.php )

<?
if (isset($_GET['option']) && $_GET['option'] != "") {
$pg = $_GET['option'];              
} ?>

3) сделать значение параметра выбранным, в зависимости от нажатой кнопки

<select>
<option value="Sales" <? if ($pg == '1') { echo "selected"; } ?> >Sales</option>
<option value="IT" <? if ($pg == '2') { echo "selected"; } ?> >IT</option>
</select>

.. и т. Д.
Так что это простой способ передачи значения на другую страницу (с помощью списка опций выбора) через GET в URL. Нет форм, нет идентификаторов ... всего 3 шага, и все работает отлично.

Answer 9

function foo(value)
{
    var e = document.getElementById('leaveCode');
    if(e) e.value = value;
}

Answer 10

Предположим, что ваша форма называется form1 :

function selectValue(val)
{
  var lc = document.form1.leaveCode;
  for (i=0; i<lc.length; i++)
  {
    if (lc.options[i].value == val)
    {
        lc.selectedIndex = i;
        return;
    }
  }
}