jQuery将空白选项添加到列表顶部并选择现有下拉列表

Question

所以我有一个下拉列表

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

Answer 1

这有效:

$("#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");???????????

Answer 2

解决方案本机Javascript：

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

示例： http: //codepen.io/anon/pen/GprybL