Есть ли способ показать / скрыть некоторые опции и показать / скрыть другие в выборе, когда параметр выбран в другом выборе? - PullRequest
Новая
       21

Есть ли способ показать / скрыть некоторые опции и показать / скрыть другие в выборе, когда параметр выбран в другом выборе?

1 голос
/ 20 апреля 2019

Я пытаюсь создать выбор, параметры которого отображаются / скрываются на основе выбора в предыдущем выборе.Я знаю, что есть несколько различных решений этой проблемы, но я не смог найти решение, которое подходило бы моей проблеме, так как они, например, были слишком сложными или делали что-то немного другое, например, мы показывали и скрывали целые выборки.чем просто варианты.

Мне удалось найти одно решение, которое было почти идеальным.

http://jsfiddle.net/GhmzP/1/

Проблема с этим состояла в том, что первый выбор был сделан как тип ввода радиосигнала, и мне нужно, чтобы это был выбор.

Мой HTMLкод выглядит следующим образом: 

<select name="action">
    <option selected>check</option>
    <option>activate</option>
</select>

<select name="unit">
    <option class="sensor" value="s1">Sensor 1</option>
    <option class="sensor" value="s2">Sensor 2</option>
    <option class="sensor" value="s3">Sensor 3</option>
    <option class="sensor" value="s4">Sensor 4</option>

    <option class="relay" value="r1">Relay 1</option>
    <option class="relay" value="r2">Relay 2</option>
    <option class="relay" value="r3">Relay 3</option>
    <option class="relay" value="r4">Relay 4</option>
</select>

Таким образом, чтобы подвести итог, когда проверка выбрана в первом варианте, я хочу, чтобы все датчики класса были показаны, а когда активирован, я хочу, чтобы все реле классачтобы быть показанным.

Я попытался изменить сценарий js из вышеупомянутой скрипки, но мне это не удалось.Я был бы очень благодарен за любую помощь.

1 Ответ

0 голосов
/ 20 апреля 2019

Для этого можно использовать обработчик событий change(). 

var $unit = $('[name="unit"]');

$('[name="action"]').change(function() {
  var cls = this.value === 'activate' ? '.relay' : '.sensor';
  $unit.find('option' + cls).show();
  $unit.val($unit.find('option' + cls + ':first').val());
  $unit.find('option:not(' + cls + ')').hide();
}).change()
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="action">
  <option selected>check</option>
  <option>activate</option>
</select>

<select name="unit">
  <option class="sensor" value="s1">Sensor 1</option>
  <option class="sensor" value="s2">Sensor 2</option>
  <option class="sensor" value="s3">Sensor 3</option>
  <option class="sensor" value="s4">Sensor 4</option>

  <option class="relay" value="r1">Relay 1</option>
  <option class="relay" value="r2">Relay 2</option>
  <option class="relay" value="r3">Relay 3</option>
  <option class="relay" value="r4">Relay 4</option>
</select>
...