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

【问题标题】：Selectbox hide first option entry on dropdown?选择框隐藏下拉菜单上的第一个选项条目？
【发布时间】：2011-10-18 07:58:23
【问题描述】：

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

【问题讨论】：

【解决方案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);
    });
});

这是working example

【讨论】：

+1，只是在普通的 ol' JS 中输入了相同的答案。 display:none 适用于某些浏览器，但不幸的是，并非所有浏览器都适用。但是，将元素添加回模糊是没有意义的，它会导致您添加的小提琴出现问题。
嗯，你说得对，它确实会导致问题。我在想如果没有选择任何内容，OP 会希望它重新添加它，但我并没有真正考虑清楚，因为一旦删除第一个，就必须选择另一个！
示例二中的问题，如果我选择它会删除 First 但如果我返回并尝试更改我的选择，它会删除 Second。

【解决方案2】：

您可以使用普通的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/

【讨论】：

这是最好最简单的解决方案。

【解决方案3】：

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

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

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

Tutorial for this solution

【讨论】：

这就是我所做的。想知道为什么这些人正在寻找 Javascript 解决方案，因为这样简单就可以完成工作。
确实是最好的解决方案！无需使用另一个 JS。最轻的解决方案 IMO。

【解决方案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); 
});

【讨论】：

问题是每次我选择并点击离开然后再次重新选择它会删除下一个。
@acctman：当然可以——我真傻。已更新，已修复。

【解决方案5】：

如果你想删除这个选项，简单的代码是：

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

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

其中mySelect 是选择框的ID。

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

【讨论】：

接近我正在寻找的是否有办法做类似 Onfocus hide elementById('hideMe')