隐藏下拉选项

Question

我正在尝试使用 'hidden' 属性select主动隐藏下拉列表中的选项。请看一下 jsfiddle，其中我隐藏了 'quietest' 选项。

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

当点击下拉列表中的箭头时，'quietest' 选项被成功隐藏（仅列出 'fastest' 和 'balanced'），但是，用户仍然可以 select 使用键盘输入 'quietest' 选项。这是 'hidden' 属性的预期行为吗？如何正确隐藏以使其不再 select 可用？取消隐藏该选项也需要很容易（因此最好不要删除该选项）。

Answer 1

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

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

DEMO

Answer 2

要停止选择，请同时添加 disabled

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

Answer 3

你可以这样试试：

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>

隐藏下拉选项

Hiding option in dropdown

html

arrays

jquery

hidden