Как программно установить значение элемента выпадающего списка с помощью 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-элемента
Как изменить класс элемента с помощью JavaScript?
Как изменить класс элемента с помощью JavaScript?
Как выбрать элемент по имени с помощью jQuery?
Как проверить, включён ли line-clamp?