Показать select при выборе значения с другого select

222

18 апреля 2018, 05:03

Здравствуйте, есть такой простой пример, при выборе значения первого select появляется второй при помощи изменения параметра css. Все хорошо работает, но не могу понять как сделать третий шаг, чтоб при выборе значения второго select появлялся третий, либо при выборе в первом появлялось два - второй и третий.

<script type="text/javascript" src="http://code.jquery.com/jquery- 
1.8.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
$("#select1").change(function () {
    var x = $('select option:selected').attr('name');
    $('#step2').find('select').css('display','none');
    $('#'+x).css('display','block');
})
});
</script>
<style>
 #step2 select{
display:none;
}
</style>
</head>
<body>
<select id="select1">
<option selected disabled>Выбирите</option>
<option name="select1_step2">А</option>
<option name="select2_step2">a</option>
</select>
<div id="step2">
<select id="select1_step2">
<option selected disabled>Выбирите</option>
<option>А</option>
<option>B</option>
<option>C</option>
<option>D</option>
</select>
<select id="select2_step2">
<option selected disabled>Выбирите</option>
<option>a</option>
<option>b</option>
<option>c</option>
<option>d</option>
</select>
</div>

Буду очень благодарна за помощь

Answer 1

$('#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"> 
  <select id="select2_1"> 
<option selected disabled>Выбирите(список1)</option> 
<option>А</option> 
<option>B</option> 
<option>C</option> 
<option>D</option> 
</select> 
  <select id="select2_2"> 
<option selected disabled>Выбирите(список2)</option> 
<option>a</option> 
<option>b</option> 
<option>c</option> 
<option>d</option> 
</select> 
</div>