web-dev-qa-db-ja.com

jQueryは空白のオプションをリストの先頭に追加し、既存のドロップダウンを選択します

だから私はドロップダウンリストを持っています

<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>');
jqueryselectdrop-down-menu
58
Phill Pafford

これはうまくいきました：

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

Firebugの出力：

<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");​​​​​​​​​​​
140
Sampson

ソリューションネイティブJavascript：

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

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

3
Snoozer