jQuery如何在选择下拉列表中的有价值选项后添加空白选项？

Question

jQuery如何在有价值的选项后添加空白选项？

我编写了代码，但它在下拉列表的顶部添加了空白选项。但我需要一个有价值的选择，一个空白

像这样：

<option></option>
<opton valu2="1">Red</option>
<option></option>
<option value="2">Green</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>

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

Answer 1

问题是你在JS代码之后有几个不可打印的字符：

导致错误：

  

未捕获的SyntaxError：无效或意外的令牌

如果你删除它们，代码工作正常：

＆＃13;

＆＃13;

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

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

prependTo()方法在开头添加元素。要在元素后使用after()方法附加。

// get all options were value is not empty
$('#theSelectId option:not([value=""])')
  // append empty option after the element
  .after('<option value=""></option>')

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>