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

Question

JSFiddle 上的此问题示例

在 Chrome，最新，Ubuntu 中运行。

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

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

例子

• 隐藏/显示类示例，说明当一个块被注释掉时它是如何工作的
• 两个块 CSS 示例显示一组选项如何工作，另一组不工作。

Answer 1

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

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