Javascript 选择框是否在下拉列表中隐藏第一个选项条目？

当用户单击下拉框查看选项时，是否可以隐藏第一个选项，即

选择一个

。因此，文本选择一个不会出现在列表中

因为没有可靠的跨浏览器方式来隐藏

选项

元素，最好是在

焦点

上删除它，然后在

模糊

上再次添加它：

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);
    });
});

---

下面是一个

如果要删除该选项，simples代码将是：

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

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

其中

mySelect

是选择框的id

---

编辑：我更改了代码，为焦点事件附加了一个事件侦听器。但是，此代码将在每次选择选择框时删除第一个选项。很确定这不是你需要的。您可以使用onblur再次附加该选项，但我不知道这是否是您需要的。请澄清您要执行的操作。

唯一的跨浏览器方法是将其完全删除。在普通的ol'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); 
});

---

作为一个快速CSS选项，您可以给下拉列表一个id，然后

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

上面使用#cat作为下拉列表的id

---

当select以以下方式打开时，您可以使用普通HTML隐藏选项的第一个元素：

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

</select>

第一要素
第二要素
第三要素

这是工作小提琴：

---

+1，刚刚用简单的ol'JS输入了相同的答案

display:none

在某些浏览器中不起作用，只是不幸的是，并非所有浏览器都起作用。但是，将元素添加回模糊没有任何意义，它会导致您添加的小提琴出现问题。嗯，您是对的，它确实会导致问题。我在想，如果没有选择任何内容，OP会希望它重新添加，但我并没有认真考虑，因为一旦删除第一个，就必须选择另一个！例2中的问题：如果我选择它，它会先删除，但如果我返回并尝试更改我的选择，它会删除第二个。问题是每次我选择并单击“删除”，然后再次重新选择，它会删除下一个。@acctman:当然会-我太傻了。更新，修复。接近我正在寻找的是有没有一种方法可以像Onfocus hide elementById（'hideMe'）选择类型这就是我要做的。想知道为什么这些家伙会在这么简单的情况下寻找Javascript解决方案。这确实是最好的解决方案！不需要使用其他JS。最轻的解决方案。这是最好和最简单的解决方案。