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

【问题标题】：jQuery add blank option to top of list and make selected to existing dropdownjQuery将空白选项添加到列表顶部并选择现有下拉列表
【发布时间】：2010-11-07 10:27:11
【问题描述】：

所以我有一个下拉列表

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

【问题讨论】：

标签： jquery select drop-down-menu

【解决方案1】：

这行得通：

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

萤火虫输出：

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

【讨论】：

它也适用于 prependTo：$("").prependTo("#theSelectId");

【解决方案2】：

解决方案原生Javascript：

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

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

【讨论】：