jquery - 带有一些隐藏选项的选择框不显示任何选项

Question

Example of this issue on JSFiddle

在 Chrome、最新版、Ubuntu 中运行。

当使用 jQuery 将 option 元素隐藏在 select 元素中时，它使用 display: none; 和 display: inline 改变可见性。我遇到过这样一种情况，当大多数 option 元素被隐藏时，那些应该可见的元素也没有出现。此时从列表中删除一个选项将只显示另一个选项，但带有箭头按钮，就好像问题出在 select 下拉菜单的高度上一样。

我一直无法找到是否对 select 或类似限制中的隐藏选项数量进行了限制；有人遇到过这个吗？

示例

• Hide/show class example显示一个 block 被注释掉时它是如何工作的
• Two block CSS example展示一组选项的工作原理，另一组则不然。

Answer 1

利用 jQuery 添加或删除 <option />元素。并非所有浏览器都支持 class 和 style 属性，See W3C .不确定您是如何传递或评估数据的，但这是一种卑鄙而肮脏的方式:

$('select[name="price"] option[value="whatever"]').remove();
$('select[name="price"]').append(($('<option>', { value : key }).text(value));