Как программно установить значение элемента выпадающего списка с помощью JavaScript?
У меня есть следующий элемент HTML <select>
:
<select id="leaveCode" name="leaveCode">
<option value="10">Ежегодный отпуск</option>
<option value="11">Медицинский отпуск</option>
<option value="14">Долговременный отпуск</option>
<option value="17">Отпуск без оплаты</option>
</select>
Используя функцию JavaScript с номером leaveCode
в качестве параметра, как мне выбрать соответствующий вариант в списке?
5 ответ(ов)
Вы можете использовать следующую функцию для выбора значения в выпадающем списке:
function selectElement(id, valueToSelect) {
let element = document.getElementById(id);
element.value = valueToSelect;
}
selectElement('leaveCode', '11');
Вот разметка вашего выпадающего списка:
<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>
Если вам также нужно вызвать событие onchange
, вы можете добавить следующий код:
element.dispatchEvent(new Event('change'));
Так вы сможете не только установить выбранное значение, но и уведомить другие части вашего кода о его изменении.
Хотя я не отвечаю на ваш вопрос, вы также можете выбрать элемент по индексу, где 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;
Обратите внимание, что в цикле нужно правильно определить длину массива (len
должно присваиваться значение formObj.leaveCode.length
, а не быть просто меньше).
Ваш код выглядит корректно для установки значения выбранного элемента <select>
по его id
. Функция setSelectValue
принимает два аргумента: id
— идентификатор элемента, и val
— значение, которое вы хотите установить.
Вот перевод вашего кода на русский язык с пояснением:
function setSelectValue(id, val) {
document.getElementById(id).value = val; // Устанавливаем значение элемента с указанным id
}
// Устанавливаем значение 14 для элемента с id 'leaveCode'
setSelectValue('leaveCode', 14);
Важно убедиться, что элемент с id 'leaveCode' существует и что значение 14 является допустимым значением для данного элемента <select>
. В противном случае, значение не будет успешно установлено. Если у вас возникнут проблемы с установкой значения, убедитесь, что элемент уже загружен на странице перед вызовом функции, и что вы используете корректное значение.
Этот код устанавливает значение элемента с идентификатором 'leaveCode' в '10'. Если '10' соответствует коду для "Annual Leave", то это приведёт к выбору "Annual Leave". Убедитесь, что в вашем коде есть соответствие между значениями и их описаниями. Если вы используете этот элемент в контексте выбора, вам также может понадобиться вызвать событие изменения (change
), чтобы обновить пользовательский интерфейс после установки значения. Вот пример:
document.getElementById('leaveCode').value = '10';
document.getElementById('leaveCode').dispatchEvent(new Event('change'));
Таким образом, вы обновите интерфейс и отобразите "Annual Leave" при необходимости.
Ваш код определяет функцию foo
, которая принимает один параметр value
. Внутри функции происходит следующий процесс:
- С помощью
document.getElementById('leaveCode')
вы пытаетесь получить элемент с идентификаторомleaveCode
из документа. Результат этого вызова сохраняется в переменнойe
. - Затем, с помощью условной инструкции
if(e)
, вы проверяете, существует ли элементe
. Если элемент существует (то естьe
не равенnull
), вы устанавливаете его свойствоvalue
в значение, переданное в функцию.
Таким образом, функция foo
обновляет значение элемента с идентификатором leaveCode
, если этот элемент присутствует в DOM.
Если у вас есть дополнительные вопросы или вам нужно больше информации, не стесняйтесь спрашивать!
Получить координаты (X,Y) HTML-элемента
Эквивалент document.createElement в jQuery?
Как определить, виден ли элемент DOM в текущей области просмотра?
Как выбрать элемент по имени с помощью jQuery?
Как включить один HTML файл в другой?