当在不同的选择中选择一个选项时，有没有办法显示/隐藏某些选项并在选择中显示/隐藏其他选项？

Posted 2023-05-08

【中文标题】当在不同的选择中选择一个选项时，有没有办法显示/隐藏某些选项并在选择中显示/隐藏其他选项？

【英文标题】：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?

【发布时间】：2019-09-10 15:16:06

【问题描述】：

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

我能够找到一种几乎完美的解决方案。

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>

Su总结，在第一个选项中选择检查时，我希望要显示所有类传感器，并且选择激活时，我希望所有级别中继所示。

我尝试从上述小提琴中修改 js 脚本，但没有成功。我会非常感谢任何帮助。

【参考方案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>

【讨论】：

您好，这已经奏效，非常感谢您抽出宝贵的时间。它在谷歌浏览器上完美运行，但在 safari 上，它仍然显示传感器选项。即使在野生动物园中也有办法让它工作吗？再次感谢！

@DanielJanda ：可能是由于反引号...已更新以适用于旧版浏览器