2

Здравствуйте, есть такой простой пример, при выборе значения первого 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>

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

1 ответ 1

3

$('#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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.