Блог

Главная - Вопросы по программированию - Указать текущее значение списка опций с помощью js и добавить это значение к объекту?

Указать текущее значение списка опций с помощью js и добавить это значение к объекту?

#dom #javascript-objects

#dom #javascript-объекты

Вопрос:

HTML

 <div class="options-container">
 <select id="all-options">
  <option value="0" selected>NY</option>
  <option value="1">LA</option>
  <option value="2">Toronto</option>
  <option value="3">Paris</option>
 </select>
</div>

JS

 let selectedOption = {};
let allOptions = document.getElementById('all-options');
let optionValue = allOptions.options[all-options.selectedIndex].value;
if (optionValue == "0") {
    selectedOption.value === "0"
} else if (optionValue  === "1") {
    selectedOption.value === "1"
} else if (optionValue  === "2") {
    selectedOption.value === "2"
} else if (optionValue  === "3") {
    selectedOption.value === "3"
};

Я пытаюсь указать текущее значение элемента списка опций в моем HTML-файле с помощью JS, чтобы я мог добавить это значение к объекту selectedOption. Значение может быть добавлено либо в виде объекта string, либо number.

Комментарии:

1. Ваш вопрос неясен — каков именно ваш ожидаемый результат?

2. Спасибо за комментарий. У меня есть выпадающее меню, и я хочу упорядочить свой JS так, чтобы при выборе LA значение «1» было перенесено в объект selectedOption, и так далее, и тому подобное.

Ответ №1:

Определение прослушивателя событий

Вы захотите определить прослушиватель событий в своем <select> . Например:

         function onSelectItem(evt)
        {
            let value = evt.target.selectedOptions[0].value;
            let text = evt.target.selectedOptions[0].text;

            // Assign it how you want here:
            selectedOption = value;
        }

На самом деле вы не можете «нажать» на объект. Если вы имели в виду массив, измените выбранный параметр на массив ( [] ) и сделайте selectedOption.push(value) . Однако, если вам нужен полезный объект, вы можете просто назначить его evt.target.selectedOptions[0] .

Подключение прослушивателя

После этого вы можете прикрепить его в html и передать объект события через event переменную по умолчанию:

     <select id="all-options" onchange="onSelectItem(event)">
      <option value="0">NY</option>
      <option value="1">LA</option>
      <option value="2">Toronto</option>
      <option value="3">Paris</option>
    </select>

или больше Javascript при загрузке страницы (установив для onload атрибута значение "init()" в <body> ):

         function init()
        {
            let menu = document.getElementById('all-options');

            menu.addEventListener('change', onSelectItem);
            // Since it seems that you also want a default selected value when the 
            // page loads, you should probably also initialize your `selectedOption` to `0`.
            selectedOption = menu.selectedOptions[0].value;
        }