当在不同的选择中选择一个选项时,有没有办法显示/隐藏某些选项并在选择中显示/隐藏其他选项?
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了当在不同的选择中选择一个选项时,有没有办法显示/隐藏某些选项并在选择中显示/隐藏其他选项?相关的知识,希望对你有一定的参考价值。
我正在尝试创建一个选择,其中的选项显示/隐藏基于先前选择中的选择。我知道这个问题有一些不同的解决方案,但是我无法找到适合我的问题的解决方案,因为它们要么是太复杂,要么做了一些稍微不同的事情,比如我们显示和隐藏整个选择而不是而不仅仅是选项。
我找到了一个几乎完美的解决方案。
这个问题是,第一个选择是作为无线电类型输入而我需要它作为选择。
我的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脚本,但我没有成功。我会非常感谢任何帮助。
答案
您可以使用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>
以上是关于当在不同的选择中选择一个选项时,有没有办法显示/隐藏某些选项并在选择中显示/隐藏其他选项?的主要内容,如果未能解决你的问题,请参考以下文章
仅当在 angularjs 中选择选项卡时如何调用函数(或指令)?