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

前端之家收集整理的这篇文章主要介绍了jQuery添加空白选项到列表的顶部,并选择现有的下拉列表前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
所以我有一个下拉列表
  1. <select id="theSelectId">
  2. <option value="volvo">Volvo</option>
  3. <option value="saab">Saab</option>
  4. <option value="mercedes">Mercedes</option>
  5. <option value="audi">Audi</option>
  6. </select>

这是我想要的

  1. <select id="theSelectId">
  2. <option value="" selected="selected"></option>
  3. <option value="volvo">Volvo</option>
  4. <option value="saab">Saab</option>
  5. <option value="mercedes">Mercedes</option>
  6. <option value="audi">Audi</option>
  7. </select>

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

尝试这,但不工作

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

我已经尝试过,但清除了其他的价值观

  1. $('#theSelectId option').prependTo('<option value=""></option>');

解决方法

这工作:
  1. $("#theSelectId").prepend("<option value='' selected='selected'></option>");

Firebug输出

  1. <select id="theSelectId">
  2. <option selected="selected" value=""/>
  3. <option value="volvo">Volvo</option>
  4. <option value="saab">Saab</option>
  5. <option value="mercedes">Mercedes</option>
  6. <option value="audi">Audi</option>
  7. </select>

如果你想颠倒顺序,你也可以使用.prependTo:

  1. $("<option>",{ value: '',selected: true }).prependTo("#theSelectId");​​​​​​​​​​​

猜你在找的jQuery相关文章