jQuery的添加空白选项列表的顶部，使选择现有的下拉列表(jQuery add blank opt

所以我有一个下拉列表

<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

文章来源: jQuery add blank option to top of list and make selected to existing dropdown