Question

我尝试使用隐藏的＆＃39;选择性隐藏下拉列表中的选项。属性。请查看jsfiddle，其中我隐藏了最安静的＆＃39;选项。

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

点击下拉列表中的箭头时，“安静”＆＃39;选项已成功隐藏（仅列出＆＃39;最快＆＃39;以及＆＃39;平衡＆＃39;但是，用户仍然可以选择“最安静”的选项。使用键盘选项。对于“隐藏”的预期行为是什么？属性？如何正确隐藏，以便它不再可选？它也需要很容易取消隐藏选项（因此最好不要删除选项）。

Answer 1

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

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

Answer 2

您可以尝试这样：

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>

Answer 3

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

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

DEMO

在下拉列表中隐藏选项

3 个答案: