选择框隐藏下拉菜单中的第一个选项条目？

Question

当用户单击下拉框查看选项时，是否可以隐藏第一个选项，即 Select One 。因此文本选择一个不会出现在列表中

Answer 1

由于没有可靠的跨浏览器方法来隐藏 option 元素，因此最好的选择是在 focus 上删除它，然后在 blur 上再次添加它：

jQuery(document).ready(function () {
    var first = jQuery('#myselect').find('option').first();
    jQuery('#myselect').on('focus', function (e) {
        first.remove();
    }).on('blur', function (e) {
        jQuery(this).find('option').first().before(first);
    });
});

这是一个工作示例

Answer 2

当 select 打开时，您可以使用纯 HTML 来隐藏选项的第一个元素，如下所示：

<select name="list">
    <option selected="selected" hidden>First Element</option>
    <option>Second Element</option>
    <option>Third Element</option>

</select>

这是工作小提琴：
https://jsfiddle.net/sujan_mhrzn/y5kxtkc6/

Answer 3

作为一个快速的 CSS 选项，您可以为下拉菜单指定一个 id，然后

#cat option:first-child {
 display: none;
 } 

上面使用 #cat 作为下拉菜单的 id

此解决方案的教程

Answer 4

唯一的跨浏览器方法是完全删除它。用简单的 JS：

var sel = document.getElementById("mySelect");
sel.onfocus = function () {
    select.onfocus = null;
    sel.removeChild(sel.firstChild);
}

jQuery：

$("#mySelect").focus(function () { 
    $(this).remove(this.firstChild).unbind(arguments.callee); 
});

Answer 5

如果您想删除该选项，简单的代码如下：

var mySelect = document.getElementById('mySelect');

mySelect.onfocus = function() { mySelect.removeChild(mySelect.options[0]); }

其中 mySelect 是选择框的 id。

编辑：我更改了代码以附加焦点事件的事件侦听器。但是，每当您选择选择框时，此代码都会每次删除第一个选项。很确定这不是您所需要的。您可以使用 onblur 再次附加该选项，但我不知道这是否是您所需要的。请明确你想做什么。