当一个选项在另一个 select 中被 select 编辑时，有没有办法在 select 中 show/hide 一些选项和 show/hide 其他选项？

Question

我正在尝试创建一个 select，它的选项 show/hide 基于之前 select 中的 selection。我知道这个问题有很多不同的解决方案，但我无法找到适合我的问题的解决方案，因为它们要么过于复杂，要么做了一些稍微不同的事情，比如我们显示和隐藏整个 selects 而不仅仅是选项。

我找到了一种近乎完美的解决方案。

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

这个的问题是，第一个 selection 是作为无线电类型输入制作的，我需要它是 select。

我的 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>

所以综上所述，当在第一个选项中 selected 时，我希望显示所有 class 传感器，而当 selected 激活时，我希望显示所有 class 中继。

我尝试修改上述fiddle中的js脚本，但没有成功。如果有任何帮助，我将不胜感激。

Answer 1

您可以使用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>

当一个选项在另一个 select 中被 select 编辑时，有没有办法在 select 中 show/hide 一些选项和 show/hide 其他选项？

Is there a way to show/hide some option and show/hide others in a select when an option is selected in a different select?

html

javascript

jquery

select

html-select