jQueryのSELECT要素で特定のオプションをどのように選択しますか?


718

インデックス、値、またはテキストを知っている場合。直接参照するためのIDがない場合も同様です。

これこれこれはすべて役に立つ答えです。

マークアップの例

<div class="selDiv">
  <select class="opts">
    <option selected value="DEFAULT">Default</option>
    <option value="SEL1">Selection 1</option>
    <option value="SEL2">Selection 2</option>
  </select>
</div>

46
$("#my_select").val("the_new_value").change();... ...からそう
dsdsdsdsd

回答:


1206

中央のoption-elementを値で取得するセレクターは

$('.selDiv option[value="SEL1"]')

インデックスの場合:

$('.selDiv option:eq(1)')

既知のテキストの場合:

$('.selDiv option:contains("Selection 1")')

編集:上記でコメントしたように、OPはドロップダウンの選択された項目を変更した後である可能性があります。バージョン1.6以降では、prop()メソッドが推奨されます。

$('.selDiv option:eq(1)').prop('selected', true)

古いバージョンでは:

$('.selDiv option:eq(1)').attr('selected', 'selected')

EDIT2:ライアンのコメントの後。「セレクション10」での試合は望ましくないかもしれません。全文に一致するセレクターは見つかりませんでしたが、フィルターは機能します。

 $('.selDiv option')
    .filter(function(i, e) { return $(e).text() == "Selection 1"})

EDIT3$(e).text()比較に失敗する改行が含まれる可能性があるため、注意して使用してください。これは、オプションが暗黙的に閉じられている場合に発生します(</option>タグなし)。

<select ...>
<option value="1">Selection 1
<option value="2">Selection 2
   :
</select>

e.text末尾の改行のような余分な空白を単に使用すると、比較がより堅牢になります。


8
:containsはテキストの一部と一致するため、優れていません。オプションテキストのいずれかが別のオプションテキストの部分文字列である場合は問題があります。
ライアン

26
これも機能します$( '#id option [value = "0"]')。attr( 'selected'、 'selected');
DevC 2015年

@GrastveitクラスがmyClassであるときに、最初のオプションが選択されているかどうかにかかわらず、最初のオプションの色を変更する方法。ありがとう
Zaker

@Userわからない。たぶん、新しい質問に投稿しますか?それとも$( '。selDiv .myClass')。css( 'color'、 'red')ですか?
Grastveit

6
DEFINITELYは、attrではなく、propを使用する必要があります。私はほとんどアプリケーションをデバッグしようとして、attrからpropに変更することで問題を修正しました。
user609926 2016年

125

上記のいずれの方法でも必要な解決策が提供されなかったため、自分にとって有効な方法を提供できると考えました。

$('#element option[value="no"]').attr("selected", "selected");

10
jQuery 1.6以降、これは使用する必要があり、使用propしないでくださいattr
コーディングを終了

@GoneCoding Using .attrは正しいです。「selected」は、<option> w3.org/TR/html5/forms.html#attr-option-selected
Carlos Llongoの

3
@CarlosLlongo:それは無関係です。jQueryの推奨事項は、常にpropを優先して使用することattrです。これにより、属性のみであるか、バッキングアクションで実装されているかを確認するために、w3.orgのすべてのプロパティを検索する必要がなくなります。
Gone Coding

82

あなたはval()メソッドを使うことができます:

$('select').val('the_value');

20
すべてのSELECT要素の値をに設定しているため、これは誤りですthe_value。.valはセレクター/フィルター機能ではありません!これはプロパティアクセサーであり、その文字列に値を設定します。私は賛成票を取り戻そうとしましたが、テストでこれを実現した後は遅すぎました。
AaronLS、2011年

4
有用な回答として10票を得ましたか?val()はゲッターとセッターです。val()だけを使用すると、値が取得されます。val( 'the_value')のようなものを渡すと、それを 'the_value'に設定します
Gui

12
@AaronLSと@guilhermeGeek、ドキュメントを参照してください(最後の例)。これは、選択、チェックボックス、ラジオボタンのセレクターとして機能し、テキスト入力とテキストエリアの値セッターとして機能します。
Leandro Ardissone、2011年

9
ドキュメントを誤って読みました。チェックボックス、ラジオ、リストボックスの場合、コマンドはこれらのアイテムの「選択」属性を設定します。最後の例は、val( "checkbox 1")を渡すとどのように選択されるかを示しています。これは、CSS / jqueryセレクターを介してオブジェクトを取得するという点で「セレクター」と同じではありません。私はあなたのコードをテストしましたが、それは最終的には機能しません。
AaronLS、2011年

27
+1:いいえ、これはJQueryセレクタではありませんが、この質問を検索するほとんどの人は私のようであり、現在選択されているオプションを変更したいだけです。実際のセレクターを思い付くことは、それを行うための単なる方法です。そして、これは確かに、私が見たすべてのオプションを反復させる回答よりも優れています。
kdgregory

57

値によって、jQuery 1.7で私のために働いたのは以下のコードでした、これを試してください:

$('#id option[value=theOptionValue]').prop('selected', 'selected').change();

5
.change()メソッドが必要かどうかはわかりません。
Phillip Senn、2014

6
.change()必要がありました。SELECTに基づいてサムネイルを切り替える例がありました。カスタムテーマをアップロードすると、オプションのリストから[カスタムテーマ]が選択されるはずでした。.prop()コールは働いたが、なくて.change()、私の選択の右側にサムネイル画像が更新されません。
Volomike、2014

2
.change()が最善のアドバイスでした。+1
Ja8zyjits 2016年

1
注:ブールprop値でも同じ出力が生成されます。例.prop('selected', true)
コーディング終了

場合によっては、一部のブラウザ(おそらく古いブラウザ)では、文字列 'selected'が必要です。それらの大部分はテキスト文字列をサポートしていると思います。
mpoletto 2017年

16

これを行うにはいくつかの方法がありますが、最も明確なアプローチは、トップの回答とに関する大量の議論の中で失われていますval()。また、jQuery 1.6の時点で一部のメソッドが変更されたため、これには更新が必要です。

次の例では、変数$select<select>、たとえば次のように、目的のタグを指すjQueryオブジェクトであると想定します。

var $select = $('.selDiv .opts');

注1-値の一致にはval()を使用します。

値の一致についてval()は、属性セレクターを使用するよりもはるかに単純です。https//jsfiddle.net/yz7tu49b/6/

$select.val("SEL2");

セッターのバージョン.val()に実装されてselect設定することにより、タグselectedのマッチングのプロパティoptionと同じとはvalue、そのすべての最新ブラウザ上でうまく動作します。

注2-prop( 'selected'、true)を使用します。

あなたが直接オプションの選択状態を設定したい場合は、使用することができますprop(ないattrと)booleanパラメータ(というよりもテキスト値selected):

例:https : //jsfiddle.net/yz7tu49b/

$option.prop('selected', true);  // Will add selected="selected" to the tag

注3-不明な値を考慮:

を使用してval()を選択して<option>も、valが一致しない場合(値のソースによっては発生する可能性があります)、「nothing」が選択され、$select.val()が返されnullます。

したがって、示されている例の場合、および堅牢性のために、次のようなものを使用できますhttps://jsfiddle.net/1250Ldqn/

var $select = $('.selDiv .opts');
$select.val("SEL2");
if ($select.val() == null) {
  $select.val("DEFAULT");
}

注4-完全に一致するテキスト:

完全なテキストで照合する場合は、filterwith関数を使用できます。例:https : //jsfiddle.net/yz7tu49b/2/

var $select = $('.selDiv .opts');
$select.children().filter(function(){
    return this.text == "Selection 2";
}).prop('selected', true);

余分な空白がある場合は、次のようにチェックにトリムを追加することができます

    return $.trim(this.text) == "some value to match";

注5-インデックスによる一致

インデックスで一致させたい場合は、選択の子にインデックスを付けるだけです。例:https : //jsfiddle.net/yz7tu49b/3/

var $select = $('.selDiv .opts');
var index = 2;
$select.children()[index].selected = true;

私は最近、jQueryを支持して直接DOMプロパティを回避する傾向がありますが、将来を見据えたコードを使用するため、https//jsfiddle.net/yz7tu49b/5/としても実行できます

var $select = $('.selDiv .opts');
var index = 2;
$select.children().eq(index).prop('selected', true);

注6-change()を使用して新しい選択を開始する

上記のすべてのケースで、変更イベントは発生しません。これは、再帰的な変更イベントが発生しないように設計されています。

changeイベントを生成するには、必要に応じ.change()て、jQuery selectオブジェクトへの呼び出しを追加します。たとえば、最初の最も簡単な例はhttps://jsfiddle.net/yz7tu49b/7/になります。

var $select = $('.selDiv .opts');
$select.val("SEL2").change();

など[value="SEL2"]、属性セレクターを使用して要素を検索する方法は他にもたくさんありますが、属性セレクターは他のすべてのオプションに比べて比較的遅いことを覚えておく必要があります。


13

選択に名前を付けてこれを使用できます:

$("select[name='theNameYouChose']").find("option[value='theValueYouWantSelected']").attr("selected",true);

必要なオプションが選択されるはずです。


12
   $(elem).find('option[value="' + value + '"]').attr("selected", "selected");

投稿ありがとうございます。ただし、この回答は、承認された回答に含まれていない会話に何を追加しますか?
Edward

すでに選択されているオプションがある場合、複数選択でない限り、ドロップダウンは複数の項目を選択できないため、これは失敗します。.prop( 'selected'、true)を実行する必要があります
derekcohen

9

ドキュメンテーションに関する自分の質問への回答。これを達成する他の方法があると確信していますが、これは機能し、このコードはテストされています。

<html>
<head>
<script language="Javascript" src="javascript/jquery-1.2.6.min.js"></script>
<script type="text/JavaScript">

$(function() {
    $(".update").bind("click",      // bind the click event to a div
        function() {
            var selectOption = $('.selDiv').children('.opts') ;
            var _this = $(this).next().children(".opts") ;

            $(selectOption).find("option[index='0']").attr("selected","selected");
//          $(selectOption).find("option[value='DEFAULT']").attr("selected","selected");
//          $(selectOption).find("option[text='Default']").attr("selected","selected");


//          $(_this).find("option[value='DEFAULT']").attr("selected","selected");
//          $(_this).find("option[text='Default']").attr("selected","selected");
//          $(_this).find("option[index='0']").attr("selected","selected");

    }); // END Bind
}); // End eventlistener

</script>
</head>
<body>
<div class="update" style="height:50px; color:blue; cursor:pointer;">Update</div>
<div class="selDiv">
        <select class="opts">
            <option selected value="DEFAULT">Default</option>
            <option value="SEL1">Selection 1</option>
            <option value="SEL2">Selection 2</option>
        </select>
    </div>
</body>
</html>

9

正確に動作します以下の方法を試してください

通常の選択オプションの場合

<script>    
    $(document).ready(function() {
    $("#id").val('select value here');
       });
        </script>

select 2オプションの場合、トリガーオプションを使用する必要があります

<script>    
        $(document).ready(function() {
        $("#id").val('select value here').trigger('change');
           });
            </script>


8

トリガーを選択して選択値を設定する場合:

$('select.opts').val('SEL1').change();

スコープからオプションを設定する場合:

$('.selDiv option[value="SEL1"]')
    .attr('selected', 'selected')
    .change();

このコードは、セレクターを使用して条件付きの選択オブジェクトを見つけ、選択された属性をで変更しますattr()


さらに、change()属性をに設定した後にイベントを追加することをお勧めしselectedます。これにより、コードはユーザーによる選択の変更に近くなります。


6

リストのインデックスがわかっている場合は、これを使用します。

$("#yourlist :nth(1)").prop("selected","selected").change();

これにより、リストが変更され、変更イベントが発生します。「:nth(n)」はインデックス0から数えています


5

私は一緒に行きます:-

$("select#my-select option") .each(function() { this.selected = (this.text == myVal); });

5

これを試して

#idの代わりに選択フィールドIDを使用する(つまり、#select_name)

代わりのオプション値あなたの選択オプションの使用値を

 <script>
    $(document).ready(function() {
$("#id option[value='option value']").attr('selected',true);
   });
    </script>

3

属性を関数に送信し、更新選択オプションが必要な場合に選択されたjqueryの場合

$('#yourElement option[value="'+yourValue+'"]').attr('selected', 'selected');
$('#editLocationCity').chosen().change();
$('#editLocationCity').trigger('liszt:updated');

3
/* This will reset your select box with "-- Please Select --"   */ 
    <script>
    $(document).ready(function() {
        $("#gate option[value='']").prop('selected', true);
    });
    </script>

1

$('select').val('the_value');適切なソリューションを見て、あなたは、データテーブルの行を持っている場合:

$row.find('#component').val('All');

1

jQueryを使用しない場合は、以下のコードを使用できます。

document.getElementById("mySelect").selectedIndex = "2";

1

質問をありがとう。このコードがうまくいくことを願っています。

var val = $("select.opts:visible option:selected ").val();

0
$('#select option[data-id-estado="3"]').prop("selected",true).trigger("change");

または

$('#select option[value="myValue"]').prop("selected",true).trigger("change");

コードがコードとしてフォーマットされるように、回答を編集してください。これを行うには、ツールバーを使用するか、各コードブロックのすべての行を4つのスペースでインデントします。
beruic
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.