Question

我有这个......

<select class="wr-dropdown">
    <option selected="" value="Navigation">Navigation</option>
    <option value="something">Something</option>
    <option value="something">Something</option>
    …
</select>

点击下拉列表时我想隐藏第一个选项“导航”...当做出选择或关闭下拉列表时，我想再次显示它。

我该怎么做？

Answer 1

当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 2

$("select").focus(function(){  
    $(this).find("option").eq(0).remove(); 
 })
$("select").blur(function(){ 
    $(this).prepend("<option selected='selected'>Navigation</option>");
})

这很有效。

这是小提琴：http://jsfiddle.net/klatzkaj/38tpv/

Answer 3

如果您不喜欢第二个选项跳转到带安德鲁斯方法的选择框的方式，顺便提一下这是一个很好的例子。你可以这样做：

 $("select").focus(function(){  
    $(this).find("option").eq(0).html(''); 
 })
$("select").blur(function(){ 
   $(this).find("option").eq(0).html('Navigation');
})

点击选择框？打开选择框时隐藏第一项，关闭时显示它？

3 个答案: