Question

Assume we have three options in html select
i.e select, Male, Female.
On click I want to replace select with “”.

The below code I tried.

<select id="ageID">
    <option value="none" >loading...</option>
    <option value="one" >one</option>
    <option value="two">two</option>
    <option value="three">three</option>
</select>  

$("#ageID").on("click",function(){

    $(this).children().first().remove();
    $(this).children().first().before(" <option value='none' > </option>");

});  

It works perfectly on google chrome but not on mozilla or IE.
you can try running it using http://jsfiddle.net/
Please provide a solution

Answer 1

You can do this :

$("#ageID").on("click focus",function(){
    this.options[0].text='';
});  

Demonstration

I added the focus event because I thought you wanted the change to be made as soon as possible (which wouldn’t be the case with only click).