jquery - 单击时选择框？打开选择框时隐藏第一项，关闭时显示？

Question

我有这个……</p>

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

单击下拉菜单时，我想隐藏第一个选项“导航”……当进行选择或关闭下拉菜单时，我想再次显示它。

我怎么做？

Answer 1

打开选择时，您可以使用普通的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

如果您不喜欢第二个选项使用 Andrews Method 跳转到选择框的方式，顺便说一句，这是一个很好的例子。你可以这样做：

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

Answer 3

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

这行得通。

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