Как получить value из option на чистом JS?

78
07 июля 2021, 17:40

Делаю блок калькулятора на чистом JS. Столкнулась с проблемой, что не могу получить значение value в option. Как вариант, получилось только через onchange в html, но знаю, что это костыль, поэтому интересует правильное решение.

var select = document.getElementById('agriculture'); 
 
selectFunction = function() { 
  var getValue = select.value; 
  console.log(getValue); 
}
<select id="agriculture" onchange="selectFunction()"> 
  <option value="3100">Пшеница ≈ 3100 грн / т"</option> 
  <option value="2500">Овес ≈ 2500 грн / т"</option> 
  <option value="3100">Рожь ≈ 3100 грн / т"</option> 
  <option value="2400">Кукуруза ≈ 2400 грн / т"</option> 
  <option value="1850">Просо ≈ 1850 грн / т"</option> 
</select>

Потом эти значения буду использовать в формуле.

Answer 1

Это не костыль, просто иногда бывает неудобно редактировать JS-функции в HTML. К тому же, где-то в другом месте кода если захочется добавить еще одно событие onchange на этот элемент, новый будет работать, а предыдущий - перестанет. В целом, полезнее использовать addEventListener

var select = document.getElementById('agriculture'); 
 
select.addEventListener('change', function(){   
  var getValue = this.value; 
  // this в этом контексте - элемент, который запустил фукнцию. То же, что и select.value; 
  console.log( getValue ); 
});
<select id="agriculture"> 
  <option value="3100">Пшеница ≈ 3100 грн / т"</option> 
  <option value="2500">Овес ≈ 2500 грн / т"</option> 
  <option value="3100">Рожь ≈ 3100 грн / т"</option> 
  <option value="2400">Кукуруза ≈ 2400 грн / т"</option> 
  <option value="1850">Просо ≈ 1850 грн / т"</option> 
</select>

Answer 2

Можно с помощью метода selectedIndex получить текущий индекс

var select = document.getElementById('agriculture');
var button = document.getElementById('buttonID');

var selectedValue = select.options[select.selectedIndex].value; button.addEventListener('click', event => console.log(selectedValue));

READ ALSO
Как сделать такие овальные фоны?

Как сделать такие овальные фоны?

Есть такое изображение сайта

103
Проблемы при копировании массива в С++

Проблемы при копировании массива в С++

Есть функция которая возвращает массив:

94
C++ процесс завершает работу с кодом -1073740791

C++ процесс завершает работу с кодом -1073740791

После запуска без отладки выполняет первую строку и просит ввести данные и завершает программу c кодом -1073740791

117