【问题标题】：How to hide/show an option on click?如何在点击时隐藏/显示选项？
【发布时间】：2011-10-31 20:39:15
【问题描述】：

选择有时太大，所以我想过滤它。我将有 3 个复选框来关闭/打开一些基于值的选项。就像jsfiddle 上的示例一样

如果选项的值包含 d 隐藏它 - 在我的示例中，我们需要隐藏 2 个选项
如果未选中复选框，则显示值

可以在 jQuery 中完成。知道怎么做吗？

如果它在 firefox 中工作对我来说已经足够了（chrome 也很好但不是必需的，对于 safari 也是如此）

注意：

将有 3 个复选框 来过滤包含w、d 和,h 的值。所以隐藏/显示必须对所有人都有效。

jsfiddle 上的最终代码基于 @ShankarSangoli 的回答。

【问题讨论】：

标签： jquery select show-hide

【解决方案1】：

并非所有浏览器都支持在选择列表中隐藏option。 jQuery 甚至无法做任何事情来使其支持跨浏览器。但我们可以使用disabled 属性禁用该选项。

这是一个在复选框单击时禁用选项的工作演示。

http://jsfiddle.net/ggWJu/8/

这是在复选框单击时从选择框中添加/删除选项的工作演示。它会在删除选项的同一位置添加选项。

http://jsfiddle.net/ggWJu/9/

如果选项值包含复选框值，这将添加/删除所有选项。

http://jsfiddle.net/ggWJu/10/

【讨论】：

我需要删除/隐藏选项。让他们disabled 对我没有帮助。
它不适用于所有包含d 的值。仅适用于 3d。在我看来，之所以如此，是因为 3d 在复选框值中。
是的，这是因为我将复选框的值设置为“3d”。它将查找您在复选框中设置的任何值。
它需要是通用的。假设复选框的值为 d 我需要隐藏/显示包含此字母的所有选项。
你能看看为什么它不起作用吗？它不会返回所有选项。 jsfiddle.net/radek/ggWJu/13

【解决方案2】：

这适用于您的示例 (jsFiddle)：

$('input:checkbox').click(function() {
    if (this.checked) {
         $('select option[value$=d]').hide(); 
    } else {
         $('select option[value$=d]').show();  
    }
});

选择器option[value$=d] 查找值以“d”结尾的options。

另外，我会给你的 select 和 input 元素一些唯一的 ID，这样你就可以将它们确定为你想用 jQuery 控制的元素——这可能会影响你页面上的其他元素。

【讨论】：

嗯。我很确定不是每个浏览器都支持隐藏select 列表元素。
@floatless：这可能是真的。海报可能必须添加/删除项目，而不是切换它们的可见性。
在 Firefox 中工作。不在 chrome 和 safari 中。
如何添加/删除选项？不知道如何才能把选项放回去。
看起来是最容易实施的解决方案。可惜它只适用于 ff jsfiddle.net/radek/KDVUG

【解决方案3】：

this example 是您要查找的内容吗？请参阅 change 事件和 contains 选择器文档。

【讨论】：

在 Firefox 中工作。不在 chrome 和 safari 中。
我有 updated 小提琴。现在它看起来有点（或者不是一点点：）丑陋，但可以在 FF、Chrome 和 Safari 中使用。
看起来不错。您的代码是否记住已删除选项的索引？如果选项之前没有排序怎么办？
不，它不记得被删除元素的索引...但是使用.index() 方法我们可以将元素存储到哈希中（而不是在我的示例中为数组）。 hash的key是option元素的index，value是option DOM-element。

【解决方案4】：

您需要的是 js 部分中的一个数组。然后从该数组中，您可以通过迭代数组来动态构建一个选择元素，并且您也可以动态操作它。

【讨论】：