jQuery如何将空白选项添加到列表顶部,并选择现有的下拉菜单?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (222)

我有一个下拉列表

<select id="theSelectId">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

这是我想要的

<select id="theSelectId">
  <option value="" selected="selected"></option>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

试图在之前添加一个空白选项并将其设置为此,希望强制用户从原始列表中选择一个值,但希望在他们看到必须选择的选项时为空。

尝试这个,但不工作

// Add blank option
var blankOption = {optVal : ''};
$.each(blankOption, function(optVal, text) {
   $('<option></option>').val(optVal).html(text).preprendTo('#theSelectId');
});

我试过这个,但是清除了其他的值

$('#theSelectId option').prependTo('<option value=""></option>');
提问于
用户回答回答于

这工作:

$("#theSelectId").prepend("<option value='' selected='selected'></option>");

Firebug输出:

<select id="theSelectId">
  <option selected="selected" value=""/>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

你也可以使用,.prependTo如果你想改变顺序:

​$("<option>", { value: '', selected: true }).prependTo("#theSelectId");​​​​​​​​​​​
用户回答回答于

解决方案原生Javascript:

document.getElementById("theSelectId").insertBefore(new Option('', ''), document.getElementById("theSelectId").firstChild);

例如:http : //codepen.io/anon/pen/GprybL

扫码关注云+社区

领取腾讯云代金券