Скрытие LABEL при выборе элемента списка

139

30 мая 2019, 04:50

друзья! Ниже представляю код, который полностью устраивает меня по функционалу, но в нем есть один недочет. Подскажите пожалуйста, как сделать, чтобы поле с заголовком (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>

Answer 1

$('#select1').change(function() { 
  //скрываем все селекты шага 2 
  $('#step2 select').hide().prev("label").hide(); 
 
  var val = $(this).val(); 
  //если элемент с id равным значению #select1 существует 
  if ($('#' + val).length) { 
    //показываем нужный 
    $('#' + val).show().prev("label").show(); 
    //в противном случае, если значение равняется "all" 
  } else if (val == 'all') { 
    //показать все списки шага2 
    $('#step2 select').show().prev("label").show(); 
  } 
}); 
$('#select1').change();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<select id="select1"> 
  <option selected disabled>Выбeрите</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>Выбeрите(список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>Выбeрите(список2)</option> 
    <option>a</option> 
    <option>b</option> 
    <option>c</option> 
    <option>d</option> 
  </select> 
</div>