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

Posted 2023-03-11

【中文标题】jQuery将空白选项添加到列表顶部并选择现有下拉列表

【英文标题】：jQuery add blank option to top of list and make selected to existing dropdown

【发布时间】：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>');

【参考方案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