1

Имеются 4 select-а:

<select name="sel1" id="i1">
    <option value="1">Значение 1</option>
    <option value="2">Значение 2</option>
</select>
<select name="sel2" id="i2">
    <option value="1">Значение 3</option>
    <option value="2">Значение 4</option>
</select>
<select name="sel3" id="i3">
    <option value="1">Значение 5</option>
    <option value="2">Значение 6</option>
</select>
<select name="sel4" id="i4">
    <option value="1">Значение 5</option>
    <option value="2">Значение 6</option>
</select>

При выборе "Значение 1" в select с id i1 должен появляться select с id i4.
При выборе "Значение 2" в select с id i1 должен появляться select с id i2.
При выборе "Значение 3" в select с id i2 должен появляться select с id i3.

Как это реализовать с помощью JS/jQuery?

2 ответа 2

2

Опишу простой алгоритм того как это можно сделать. А дальше сами думайте, что нужно включать и выключать именно вам

// выбираем все элементы, с которыми будем работать
let sel1 = document.querySelector('#i1'),
    sel2 = document.querySelector('#i2'),
    sel3 = document.querySelector('#i3'),
    sel4 = document.querySelector('#i4');

// слушаем изменение значения нужного элемента
// в данном случае это элемент sel1, а наблюдаем мы
// за событием change
sel1.addEventListener('change', function(){
  // проверяем, если элемент sel1 сейчас
  // имеет значение "1"
  if (sel1.value === '1') {
    // переключаем состояние других элементов
    // например нужно включить sel2
    sel2.style.display = 'inline-block';
  } else if (sel1.value === '2') {
    // выключаем другой элемент, например sel2
    sel2.style.display = 'none';
  }
});
<select name="sel1" id="i1">
	<option value="1">Значение 1</option>
	<option value="2">Значение 2</option>
</select>

<select name="sel2" id="i2">
	<option value="1">Значение 3</option>
	<option value="2">Значение 4</option>
</select>

<select name="sel3" id="i3">
	<option value="1">Значение 5</option>
	<option value="2">Значение 6</option>
</select>

<select name="sel4" id="i4">
	<option value="1">Значение 5</option>
	<option value="2">Значение 6</option>
</select>

1
  • Спасибо большое! Хоть разобрался, как работает)
    – Lyavontiy
    29 дек 2017 в 6:41
1

Если привязки (по какому option-у показывать какой select) сделать в вёрстке с помощью data-атрибутов, то JS код можно сделать универсальным (который без каких-либо изменений сможет с тем же успехом работать хоть на 100 select-ах).

В чем состоит идея: при смене выбранного значения в select-e скрываются select-ы, которые показывались при старом значении, после чего отображается нужный select, выбранный по новому значению. Связность select-ов вычисляется по data-id у их option-ов.

Исходный пример с 4 select-ами:

$("select").on("change", function() {
  var $selectedOption = $(this).find(":selected");
  var $otherOptions = $(this).find(":not(:selected)");
  hideSubSelects($otherOptions);
  var nextSelectId = $selectedOption.data("id");
  if (nextSelectId != null) {
    var $nextSelect = $("#" + nextSelectId);
    resetSelect($nextSelect);
    $nextSelect.removeClass("hidden");
  }
});

function hideSubSelects($options) {
  $options.each(function() {
    var selectId = $(this).data("id");
    if (selectId != null) {
      var $select = $("#" + selectId);
      $select.addClass("hidden");
      hideSubSelects($select.find("option"));
    }
  });
}

function resetSelect($select) {
  $select.prop("selectedIndex", -1);
}

resetSelect($("#i1"));
.hidden {
  display: none;
}
<select name="sel1" id="i1">
  <option value="1" data-id="i4">Значение 1</option>
  <option value="2" data-id="i2">Значение 2</option>
</select>
<select name="sel2" id="i2" class="hidden">
  <option value="1" data-id="i3">Значение 3</option>
  <option value="2">Значение 4</option>
</select>
<select name="sel3" id="i3" class="hidden">
  <option value="1">Значение 5</option>
  <option value="2">Значение 6</option>
</select>
<select name="sel4" id="i4" class="hidden">
  <option value="1">Значение 7</option>
  <option value="2">Значение 8</option>
</select>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


И другой список select-ов с тем же JS кодом:

$("select").on("change", function() {
  var $selectedOption = $(this).find(":selected");
  var $otherOptions = $(this).find(":not(:selected)");
  hideSubSelects($otherOptions);
  var nextSelectId = $selectedOption.data("id");
  if (nextSelectId != null) {
    var $nextSelect = $("#" + nextSelectId);
    resetSelect($nextSelect);
    $nextSelect.removeClass("hidden");
  }
});

function hideSubSelects($options) {
  $options.each(function() {
    var selectId = $(this).data("id");
    if (selectId != null) {
      var $select = $("#" + selectId);
      $select.addClass("hidden");
      hideSubSelects($select.find("option"));
    }
  });
}

function resetSelect($select) {
  $select.prop("selectedIndex", -1);
}

resetSelect($("#i1"));
.hidden {
  display: none;
}
<select id="i1">
  <option value="1" data-id="i1_1">Значение 1</option>
  <option value="2" data-id="i1_2">Значение 2</option>
</select>
<select id="i1_1" class="hidden">
  <option value="1" data-id="i1_1_1">Значение 1_1</option>
  <option value="2" data-id="i1_1_2">Значение 1_2</option>
</select>
<select id="i1_1_1" class="hidden">
  <option value="1">Значение 1_1_1</option>
  <option value="2">Значение 1_1_2</option>
</select>
<select id="i1_1_2" class="hidden">
  <option value="1">Значение 1_2_1</option>
  <option value="2">Значение 1_2_2</option>
</select>
<select id="i1_2" class="hidden">
  <option value="1" data-id="i1_2_1">Значение 2_1</option>
  <option value="2" data-id="i1_2_2">Значение 2_2</option>
</select>
<select id="i1_2_1" class="hidden">
  <option value="1">Значение 2_1_1</option>
  <option value="2">Значение 2_1_2</option>
</select>
<select id="i1_2_2" class="hidden">
  <option value="1">Значение 2_2_1</option>
  <option value="2">Значение 2_2_2</option>
</select>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Ваш ответ

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

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