2

Есть два одинаковых select

<label>Заголовок:</label>
<select class="form-control">
 <option value="firfac">1</option>
 <option value="frecsfac">2</option>
</select>

<label>Заголовок2:</label>
<select class="form-control">
 <option>Test1</option>
 <option>Test2</option>
</select>

Можно ли как то в зависимости от выбра опции в первом select во втором показать опции зависимые от выбора первого.

Например в первом select если выбрать первый вариант, то опции у второго будут: Один, два, три, четыре. А если выбрать второй, то в опциях будет: пять, шесть, семь, восемь.

1 ответ 1

4

$("#select1").change(function() {
  if ($(this).data('options') == undefined) {
    $(this).data('options', $('#select2 option').clone());
  }
  var id = $(this).val();
  var options = $(this).data('options').filter('[value=' + id + ']');
  $('#select2').html(options);
});
$('#select1').change();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<label>Заголовок:</label>
<select name="select1" id="select1" class="form-control">
  <option value="firfac">1</option>
  <option value="frecsfac">2</option>
</select>
<label>Заголовок2:</label>
<select name="select2" id="select2" class="form-control">
  <option value="firfac">1</option>
  <option value="firfac">2</option>
  <option value="firfac">3</option>
  <option value="firfac">4</option>
  <option value="frecsfac">6</option>
  <option value="frecsfac">7</option>
  <option value="frecsfac">8</option>
  <option value="frecsfac">9</option>
</select>

1
  • используется JQuery
    – Ruslan_K
    11 дек 2016 в 11:42

Ваш ответ

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

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