如何使用JavaScript隐藏选择选项？（跨浏览器）

Question

这应该工作：

$('option').hide(); // hide options

它可以在Firefox中运行，但不能在Chrome中运行（可能未在IE中运行，未经测试）。

一个更有趣的示例：

<select>
    <option class="hide">Hide me</option>
    <option>visible option</option>
</select>
<script type="text/javascript">
// try to hide the first option
$('option.hide').hide();

// to select the first visible option
$('option:visible').first().attr('selected', 'selected');
</script>

是将选项元素与DOM分离的唯一选择吗？我需要稍后再显示给他们，所以这不会很有效。

Answer 1

不幸的是，您不能option在所有浏览器中隐藏元素。

在过去，当我需要这样做时，我就设置了它们的disabled属性，就像这样…

$('option').prop('disabled', true);

然后，我使用了这段CSS，在浏览器中支持隐藏的位置…

select option[disabled] {
    display: none;
}