Aison
@Aison

Как показывать блоки в зависимости от значения select'а?

Есть два значения option в списке select:

категория1
категория2

И есть два div блока <div>категория1</div> и <div>категория2</div>, по умолчанию оба скрыты.

Как сделать так, чтобы при выборе в select значения категория1 показывался <div>категория1</div>, но если выбрать категория2, то появлялся <div>категория2</div>, а <div>категория1</div> скрывался. и наоборот, если выбрать категория1, то появлялся <div>категория1</div>, а <div>категория2</div> скрывался.
  • Вопрос задан
  • 850 просмотров
Решения вопроса 3
https://jsfiddle.net/chashkovdaniil/Le1f7aoh/3/
JS:
// find elements
let button = $("button")

// handle click and add class
button.on("click", function(){
  let id = $("select option:selected").val()
	$('.cat').css('display', 'none')
  $('#'+id).css('display', 'block')
})

HTML:
<div>
  <select>
    <option value="cat1">Категория 1</option>
    <option value="cat2">Категория 2</option>
  </select>
  <button>Выбрать</button>
  <div class="cat" id="cat1" style="display: none">Категория 1</div>
  <div class="cat" id="cat2" style="display: none">Категория 2</div>
</div>
Ответ написан
Комментировать
Mesuti
@Mesuti
На чистом JS, вставляет в блок содержимое option


На чистом JS показывает и скрывает div
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы