Показать div при выборе select с определенным названием

Question

есть список

<select id="material">
<option value="0"></option>
<option value="рандом">Яблоко</option>
<option value="рандом">Груша</option>

Как сделать так чтобы при выборе Груша(именно по имени, а не по value), div id="prod" style="display: none;" переставал был скрытым и получал display: block Спасибо!

Answer 1

select.options[select.selectedIndex].textContent — текст выбранной опции.

document.getElementById('material').addEventListener('change', function(){
  let isPear = (this.options[this.selectedIndex].textContent == "Груша" );
  document.getElementById('prod').style.display = isPear ? "block" : "none";
});

<select id="material">
  <option value="0"></option>
  <option value="рандом">Яблоко</option>
  <option value="рандом" data="10">Груша</option>
</select>

<div id="prod" style="display: none; margin: 10px;">Груша, а вовсе не медведь!</div>

Но если код большой, со временем можно легко забыть, что привязка была к слову "Груша". Поэтому я бы как-то обозначил переключение через класс, чтобы уж точно знать, что происходит.

document.getElementById('material').addEventListener('change', function(){
  let isPear = this.options[this.selectedIndex].classList.contains("js-show-prod" );
  document.getElementById('prod').style.display = isPear ? "block" : "none";
});

<select id="material">
  <option value="0"></option>
  <option value="рандом">Яблоко</option>
  <option class="js-show-prod" value="рандом" data="10">Груша</option>
</select>

<div id="prod" style="display: none; margin: 10px;">Груша, а вовсе не медведь!</div>

БЛОГ НА HUSL

Показать div при выборе select с определенным названием

Ответы (1 шт):