select-box on click? Hide first item when selectbox is opened, show it when closed?

I have this …

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

When clicking the dropdown I'd like to hide the first option "Navigation" … when a selection is made or the dropdown is closed I want to show it again.

How do I do that?

Answers


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

This works.

Here's the fiddle: http://jsfiddle.net/klatzkaj/38tpv/


If you do not like the way the second option jumps into select box with Andrews Method, which is a great example by the way. You could do something like this:

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

Need Your Help

call model from a child directory

django model import parent

I can't import my model "LogDBEvents" from my "core" application... Here is the hierarchy of my project:

How do I create an image button with text from XML file?

android xml android-layout

I want to create a simple image button that will read a XML file, take the data from a tag, and write it on the image button.

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.