javascript - 用空值替换选项

Question

假设我们在 html select 中有三个选项，即 select、Male、Female。单击时，我想用“”替换选择。

我尝试了以下代码。

<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>");

});  

它在 google chrome 上完美运行，但在 mozilla 或 IE 上却不行。您可以尝试使用http://jsfiddle.net/运行它 请提供解决方案

Answer 1

你可以这样做 ：

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

示范

我添加了该focus事件，因为我认为您希望尽快进行更改（只有 不会出现这种情况click）。

Answer 2

试试这个：

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

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

});

Answer 3

为什么不试试这个：

$("#ageID").on("click",function(){
    $('option:first',this).text('');
}); 

Answer 4

我想你想要这样的东西

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

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

});  

Answer 5

你可以用简单的 CSS 来模仿它：

小提琴：http: //jsfiddle.net/E4ah9/

HTML

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

CSS

.placeholder { display: none; }