jQueryドロップダウンリストで貴重なオプションの後に空白のオプションを追加する方法は？

Question

jQuery貴重なオプションの後に空白のオプションを追加する方法は？

私はコードを書いたが、ドロップダウンの上部に空白のオプションを追加した。ここで

<option></option> 
<opton valu2="1">Red</option> 
<option></option> 
<option value="2">Green</option> 

私のコードです：：このような

のブランク1は、しかし、私は1つの貴重なオプションが必要、

<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コードの後、いくつかの印刷できない文字を持っているということです。

この結果、エラーになります：あなたがそれらを削除した場合

Uncaught SyntaxError: Invalid or unexpected token

、コードが正常に動作します：

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

<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>

Answer 2

prependTo()メソッドはappend要素初めに。要素の後に追加するには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>