it-swarm-ru.tech

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

У меня есть следующий элемент 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 в качестве параметра, как выбрать соответствующую опцию в списке?

343
brasskazoo
SelectElement("leaveCode", valueToSelect)

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

Если вы используете 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>
98
Einar Ólafsson
function setSelectValue (id, val) {
    document.getElementById(id).value = val;
}
setSelectValue('leaveCode', 14);
28
Andrew Hedges

Не отвечая на вопрос, но вы также можете выбрать по индексу, где 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;
14
Chase Seibert

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

Сравнение различных способов установки значения выбора с помощью 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 ()

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

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

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

9
William

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

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

а также

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

в приложении AngularJS, где был обязательный элемент <select>.

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

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

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

а также

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

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

Самый простой способ, если вам нужно:
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'];              
} ?>

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

<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 шага, и все работает отлично.

3
Lana

Должно быть что-то вроде этого:

function setValue(inVal){
var dl = document.getElementById('leaveCode');
var el =0;
for (var i=0; i<dl.options.length; i++){
  if (dl.options[i].value == inVal){
    el=i;
    break;
  }
}
dl.selectedIndex = el;
}
1
Stephen Wrighton

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

function selectValue(val)
{
  var lc = document.form1.leaveCode;
  for (i=0; i&lt;lc.length; i++)
  {
    if (lc.options[i].value == val)
    {
        lc.selectedIndex = i;
        return;
    }
  }
}
1
Milan Babuškov

Почему бы не добавить переменную для идентификатора элемента и сделать ее функцией многократного использования?

function SelectElement(selectElementId, valueToSelect)
{    
    var element = document.getElementById(selectElementId);
    element.value = valueToSelect;
}
1
Robert Swisher

Скорее всего, вы хотите это:

$("._statusDDL").val('2');

OR

$('select').prop('selectedIndex', 3); 
0
user5846985