jQueryで<select>の選択を解除する最良の方法は？

<select size="2">
<option selected="selected">Input your option</option>
<option>Input your option</option>
</select>

オプションをエレガントに選択解除するには、jQueryを使用する最良の方法は何ですか？

removeAttrを使用...

$("option:selected").removeAttr("selected");

または小道具

$("option:selected").prop("selected", false)

ここにはたくさんの答えがありますが、残念ながらそれらのすべてはかなり古く、したがってattr/に依存しremoveAttrています。

@coffeeyespleaseは、適切なクロスブラウザソリューションを使用することを正しく述べています

$("select").val([]);

別の優れたクロスブラウザソリューションは

// Note the use of .prop instead of .attr
$("select option").prop("selected", false);

ここでセルフテストを実行しているのがわかります。IE 7/8/9、FF 11、Chrome 19でテスト済み。

質問されてからしばらく経ちましたが、私は古いブラウザでこれをテストしていませんが、はるかに簡単な答えは

$("#selectID").val([]);

.val（）は、selectでも機能しますhttp://api.jquery.com/val/

最も簡単な方法

$('select').val('')

私は単にセレクト自体でこれを使用し、それはトリックをしました。

私はjQuery 1.7.1を使用しています。

これまでの回答は、IE6 / 7の複数選択に対してのみ機能します。より一般的な非マルチセレクトの場合、以下を使用する必要があります。

$("#selectID").attr('selectedIndex', '-1');

これはflyfishr64によってリンクされた投稿で説明されています。これを見ると、マルチ/非マルチの2つのケースがあることがわかります。完全なソリューションのために両方を実行することを妨げるものは何もありません。

$("#selectID").attr('selectedIndex', '-1').find("option:selected").removeAttr("selected");

ああjquery。

ネイティブのjavascriptアプローチがまだあるので、提供する必要があると感じています。

var select = document.querySelector('select'); //hopefully you'll use a better selector query
select.selectedIndex = 0; // or -1, 0 sets it to first option, -1 selects no options

これがどれだけ速いかを示すためだけに：ベンチマーク

$("#selectID option:selected").each(function(){
  $(this).removeAttr("selected");
});

これは、各項目を反復処理し、チェックされている項目のみを選択解除します

簡単なグーグルは、IEで単一の選択リストと複数の選択リストの両方に必要なことを行う方法を説明するこの投稿を見つけました。ソリューションもかなりエレガントに見えます：

$('#clickme').click(function() {
        $('#selectmenu option').attr('selected', false);

}); 

$("#select_id option:selected").prop("selected", false);

$(option).removeAttr('selected') //replace 'option' with selected option's selector

解決策をたくさんありがとう。

単一選択のコンボリストのソリューションは完全に機能します。多くのサイトを検索した後、これを見つけました。

$("#selectID").attr('selectedIndex', '-1').children("option:selected").removeAttr("selected");

$("option:selected").attr("selected", false);

別の簡単な方法：

$("#selectedID")[0].selectedIndex = -1

通常、選択メニューを使用する場合、各オプションには値が関連付けられています。例えば

<select id="nfl">
  <option value="Bears Still...">Chicago Bears</option>
  <option selected="selected" value="Go Pack">Green Bay Packers</option>
</select>
console.log($('#nfl').val()) logs "Go Pack" to the console
Set the value to an empty string $('#nfl').val("")
console.log($('#nfl').val()) logs "" to the console

これで、選択した属性がオプションから削除されませんが、本当に必要なのは値だけです。

次のように、selectにIDを設定します。
<select id="foo" size="2">

それからあなたは使うことができます：
$("#foo").prop("selectedIndex", 0).change();