在下拉菜单中隐藏选项

Posted 2023-03-05

【中文标题】在下拉菜单中隐藏选项

【英文标题】：Hiding option in dropdown

【发布时间】：2015-09-19 18:04:36

【问题描述】：

我正在尝试使用“隐藏”属性有选择地隐藏下拉列表中的选项。请查看jsfiddle，我在其中隐藏了“最安静”选项。

$('#quietest').prop('hidden', 'hidden');

单击下拉列表中的箭头时，“最安静”选项被成功隐藏（仅列出“最快”和“平衡”），但是，用户仍然可以使用键盘选择“最安静”选项。这是“隐藏”属性的预期行为吗？如何正确隐藏使其不再可选择？取消隐藏选项也需要很容易（因此最好不要删除该选项）。

【问题讨论】：

你会使用.show()/.hide() 或.toggle()。不过，在某些浏览器中隐藏选项存在问题。您最好使用.prop('disabled', true|false)

启用/禁用该选项

@chiapa 解决方案将适用于您，如果您想阻止选项选择而不是隐藏。但是禁用的选项仍然会显示在下拉列表中。如果您想同时获得两者，请尝试在需要时删除选项并在需要显示时附加。

【参考方案1】：

你可以这样试试：

Fiddle - hiding with hidden property

$('#quietest').prop('disabled', true).prop('hidden', true);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="dptcentres_edit">
    <option value="fastest">Fastest</option>
    <option selected="true" value="balanced">Balanced</option>
    <option id='quietest' value="quietest">Quietest</option>
</select>

编辑

由于@billyonecan 的评论，我替换了隐藏方法，而不是使用hidden 属性，而是使用CSS display 属性并将其设置为none 以隐藏元素。正如他正确指出的那样，hidden 属性 isn't supported by all browsers。

Fiddle - Hiding with CSS display attribute

$('#quietest').prop('disabled', true).css('display', 'none');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="dptcentres_edit">
    <option value="fastest">Fastest</option>
    <option selected="true" value="balanced">Balanced</option>
    <option id='quietest' value="quietest">Quietest</option>
</select>

【讨论】：

你最好使用.hide()，hidden属性isn't supported by all browsers

请注意，您仍然可以在键盘上键入并选择隐藏的值。请参阅 Raja 的回答。

在 Microsoft Edge 中，两个 Fiddle 都显示一个空格而不是隐藏选项。适用于 Chrome。 (Microsoft Edge 44.17763.831.0)

【参考方案2】：

要停止被选中，请同时添加disabled

$('#quietest').prop('disabled', true).hide();

【参考方案3】：

使用hide。通过隐藏option，它无法被选中。

$('#quietest').hide().prop('disable', true);

DEMO

【讨论】：

这个还是有问题的。您可以通过箭头键选择最安静的。