web-dev-qa-db-ja.com

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

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

JQueryを使用して、このオプションをエレガントに選択解除するための最善の方法は何ですか？

jqueryselect
204
user198729

removeAttr ...を使用してください.

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

または Prop

$("option:selected").prop("selected", false)
321
Ei Maung

ここにはたくさんの答えがありますが、残念ながらそれらのすべてはかなり古く、そのため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でテスト済み。

149
Jon

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

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

.val（）はselectでも同様に動作します http://api.jquery.com/val/

23
coffeeyesplease

最も簡単な方法

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

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

私はjQuery 1.7.1です。

22
Joshua Pinter

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

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

これはflyfishr64によってリンクされた記事で説明されています。あなたがそれを見れば、あなたは2つのケース - マルチ/非マルチ - があるかどうかを見るでしょう。完全な解決策のためにあなたが両方をつなぐのを止めるものは何もありません。

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

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

そして、これがどれほど速いのかをお見せするために、 ベンチマーク

7
Blaine Kasten

簡単なグーグルが見つけた この記事 これはIEの単一選択リストと複数選択リストの両方にあなたが望むことをする方法を説明しています。その解決策もまたかなり洗練されているようです。

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

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

これは各項目を繰り返し処理し、チェックされているものだけを選択解除します。

5
DinoMyte
$(option).removeAttr('selected') //replace 'option' with selected option's selector
3
Brandon Henry

解決策をどうもありがとう。

単一選択コンボリストの解決策は完璧に機能します。私は多くのサイトを検索した後にこれを見つけました。

$("#selectID").attr('selectedIndex', '-1').children("option:selected").removeAttr("selected");
2
Madeswaran Govindan
$("option:selected").attr("selected", false);
2
Charlie Brown

もう一つの簡単な方法：

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

2
Rafael

通常私が選択メニューを使うとき、それぞれのオプションはそれに関連した値を持ちます。例えば

<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

今度はこれはオプションから選択された属性を削除しませんが、私が本当に欲しいのは値だけです。

1
jtaz

$（ "＃select_idオプション：選択"）。prop（ "選択"、false）;

0
premkumar

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

次に使用できます：
$("#foo").prop("selectedIndex", 0).change();

0
TheAlphaGhost