Как программно установить значение элемента поля выбора с помощью 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-неверный занятия еще есть).

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

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

и

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

Answer 8

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

Answer 9

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

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

2) поместите этот код на свою вторую страницу (мой случай контакт.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 10

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

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

Answer 11

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

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;
    }
  }
}

Answer 12

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

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;
}

Answer 13

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

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

ИЛИ

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

Answer 14

Если вы используете PHP, вы можете попробовать что-то вроде этого:

$value = '11';
$first = '';
$second = '';
$third = '';
$fourth = '';

switch($value) {
            case '10' :
                $first = 'selected';
            break;
            case '11' :
                $second = 'selected';
            break;
            case '14' :
                $third = 'selected';
            break;
            case '17' :
                $fourth = 'selected';
            break;
        }

echo'
<select id="leaveCode" name="leaveCode">
  <option value="10" '. $first .'>Annual Leave</option>
  <option value="11" '. $second .'>Medical Leave</option>
  <option value="14" '. $third .'>Long Service</option>
  <option value="17" '. $fourth .'>Leave Without Pay</option>
</select>';

Answer 15

Боюсь, в данный момент я не могу это проверить, но раньше мне приходилось присваивать каждому тегу опции идентификатор, а затем я делал что-то вроде:

document.getElementById("optionID").select();

Если это не сработает, возможно, это приблизит вас к решению: P