друзья! Ниже представляю код, который полностью устраивает меня по функционалу, но в нем есть один недочет. Подскажите пожалуйста, как сделать, чтобы поле с заголовком (label) скрывалось и отображалось вместе с самим select. Выполните код и поймете о чем я говорю. Заранее большое спасибо за ответ!
$('#select1').change(function(){
var val = $(this).val();
//если элемент с id равным значению #select1 существует
if($('#' + val).length){
//скрываем все селекты шага 2
$('#step2 select').hide();
//показываем нужный
$('#' + val).show();
//в противном случае, если значение равняется "all"
}else if(val == 'all'){
//показать все списки шага2
$('#step2 select').show();
}
})
#step2 select{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="select1">
<option selected disabled>Выбирите</option>
<option value="select2_1">Список1</option>
<option value="select2_2">Список2</option>
<option value="all">Оба списка</option>
</select>
<div id="step2">
<label><strong>Список №1:</strong></label>
<select id="select2_1">
<option selected disabled>Выбирите(список1)</option>
<option>А</option>
<option>B</option>
<option>C</option>
<option>D</option>
</select>
<label><strong>Список №2:</strong></label>
<select id="select2_2">
<option selected disabled>Выбирите(список2)</option>
<option>a</option>
<option>b</option>
<option>c</option>
<option>d</option>
</select>
</div>