Изменение стилей на основе значения Select

210

04 февраля 2018, 03:09

Код:

<select class="select" id="aitype">
<option selected disabled>Выберите тип</option>
<option value="0">Тип 1</option>
<option value="1">Тип 2</option>
</select>
<div class="title">Выбрано</div>

Задача, если в Select выбрано значение Тип 2 (value 1), скрыть идущий далее <div class="title">Выбрано</div>.

Как это сделать? Использую бутстрап. Так же было бы желательно, на чистом CSS.

Пытался сам:

#aitype[value="0"] ~ .title {
display: none;
}

Не работает.

Answer 1

Проще на jquery:

$('#aitype').change(function(){ 
  if($(this).val() == 1) { 
	$('.title').css('display','none'); 
  } 
  else { 
    $('.title').css('display','block'); 
  } 
});

<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script> 
 
<select class="select" id="aitype"> 
<option selected disabled>Выберите тип</option> 
<option value="0">Тип 1</option> 
<option value="1">Тип 2</option> 
</select> 
 
<div class="title">Выбрано</div>

Answer 2

    <select class="select" id="aitype" onchange="this.nextElementSibling.hidden = this.value == 1;">
        <option selected disabled>Выберите тип</option>
        <option value="0">Тип 1</option>
        <option value="1">Тип 2</option>
    </select>
    <div class="title">Выбрано</div>