jquery - 隐藏下拉选项

Question

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

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

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

Answer 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 以便隐藏元素。正如他正确指出的那样，隐藏 属性 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>