6

Как программно установить значение элемента выпадающего списка с помощью JavaScript?

3

У меня есть следующий элемент 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 ответ(ов)

8

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

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'));

Так вы сможете не только установить выбранное значение, но и уведомить другие части вашего кода о его изменении.

0

Хотя я не отвечаю на ваш вопрос, вы также можете выбрать элемент по индексу, где 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, а не быть просто меньше).

0

Ваш код выглядит корректно для установки значения выбранного элемента <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>. В противном случае, значение не будет успешно установлено. Если у вас возникнут проблемы с установкой значения, убедитесь, что элемент уже загружен на странице перед вызовом функции, и что вы используете корректное значение.

0

Этот код устанавливает значение элемента с идентификатором 'leaveCode' в '10'. Если '10' соответствует коду для "Annual Leave", то это приведёт к выбору "Annual Leave". Убедитесь, что в вашем коде есть соответствие между значениями и их описаниями. Если вы используете этот элемент в контексте выбора, вам также может понадобиться вызвать событие изменения (change), чтобы обновить пользовательский интерфейс после установки значения. Вот пример:

document.getElementById('leaveCode').value = '10';
document.getElementById('leaveCode').dispatchEvent(new Event('change'));

Таким образом, вы обновите интерфейс и отобразите "Annual Leave" при необходимости.

0

Ваш код определяет функцию foo, которая принимает один параметр value. Внутри функции происходит следующий процесс:

  1. С помощью document.getElementById('leaveCode') вы пытаетесь получить элемент с идентификатором leaveCode из документа. Результат этого вызова сохраняется в переменной e.
  2. Затем, с помощью условной инструкции if(e), вы проверяете, существует ли элемент e. Если элемент существует (то есть e не равен null), вы устанавливаете его свойство value в значение, переданное в функцию.

Таким образом, функция foo обновляет значение элемента с идентификатором leaveCode, если этот элемент присутствует в DOM.

Если у вас есть дополнительные вопросы или вам нужно больше информации, не стесняйтесь спрашивать!

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