624

あなたがインデックス、値、またはテキストを知っているなら。直接参照用の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>


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

19 답변


1075

値によって中央の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')

編集2:ライアンのコメントの後。 「選択10」の一致は望ましくないかもしれません。私は見つかりませんでしたセレクタ全文に一致するが、フィルタ動作します:

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

編集3:に注意してください$(e).text()改行が含まれる可能性があるため、比較は失敗します。これはオプションが暗黙的に閉じられているときに起こります(no</option>タグ):

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

単に使うならe.text末尾の改行のような余分な空白は削除され、比較がより堅牢になります。


  • :containsはテキストの一部と一致するため、最適ではありません。いずれかのオプションテキストが別のオプションテキストのサブストリングである場合は問題があります。 - Ryan
  • これも機能$(' #idオプション[値= "0"]')。attr('選択'、'選択'); - DevC
  • @Grastveit最初のオプションが選択されているかどうかに関わらず、myClassというクラスがあるときにその色を変更する方法。ありがとう - Zaker
  • わからない。新しい質問に投稿してよろしいですか。それとも$(' .selDiv .myClass')。css('カラー'、'赤')? - Grastveit
  • 追加しますが、attrではなく、必ずpropを使用してください。私はほとんどアプリケーションをデバッグしようとしてattrからpropに変更しようとしました。 - user609926

109

上記の方法のどれもが私が必要とする解決策を提供しなかったので、私は私のために働いたものを提供するだろうと考えました。

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


  • jQuery 1.6以降ではこれを使うべきです。propではなくattr。 - Gone Coding
  • @GoneCodingを使って.attr正しい。 「選択」 < option>の属性です。w3.org/TR/html5/forms.html#attr-option-selected - Carlos Llongo
  • @ CarlosLlongo:それは無関係です。 jQueryの推奨事項は常に使うことです。propに優先してattr。これは、それが属性にすぎないか、または補助的なアクションで実装されているかどうかを確認するために、w3.orgのすべてのプロパティを調べる必要がなくなります。 - Gone Coding

71

そのまま使えますval()方法:

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


  • すべてのSELECT要素の値をに設定しているため、これは間違っています。the_value。 .valはセレクタ/フィルタ機能ではありません。これはプロパティアクセサであり、その文字列を渡すと値が設定されます。私は私の投票を取り戻そうとしましたが、私がテストでこれを思い出した後は遅すぎました。 - AaronLS
  • あなたは10個の票を役に立つ答えとして持っていますか? val()はゲッターとセッターです。 val()を使用するだけで値を取得できます。 val(the_value)のようなものを渡すと、それを' the_value'に設定することになります。 - Gui
  • @AaronLSと@guilhermeGeekを参照してください。docs(最後の例)これは、選択、チェックボックス、ラジオボタンのセレクターとして、そしてテキスト入力とテキストエリアの値セッターとして働きます。 - Leandro Ardissone
  • あなたはドキュメントを読み間違えました。チェックボックス、ラジオ、リストボックスの場合、このコマンドは「選択」を設定します。それらの項目の属性。最後の例は、val( "checkbox 1")を渡すとどのように選択されるようになるかを示しています。これは「セレクタ」と同じではありません。 CSS / jqueryセレクタを介してオブジェクトを取得するという点で。私はあなたのコードをテストしました、それは収益を上げませんでした。 - AaronLS
  • +1:いいえ、これはJQueryセレクタではありませんが、この質問を検索する人の多くは私のようなものであり、現在選択されているオプションを変更したいと思います。実際のセレクターを思いつくことはそれをするための単なる方法です。そして、これは確かに私があなたがすべての選択肢について反復してきたと私が見た答えよりも優れています。 - kdgregory

47

値では、私にとって何がうまくいったかjQuery 1.7以下のコードでした、これを試してください:

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


  • .change()メソッドが必要かどうかわかりません。 - Phillip Senn
  • .change()必要でした。 SELECTに基づいてサムネイルを切り替える例を示しました。カスタムテーマをアップロードしたときに、[カスタムテーマ]を選択するはずでした。オプションのリストから。の.prop()コールは機能しましたが、なし.change()、私の選択の右側にあるサムネイル画像が更新されることはありません。 - Volomike
  • .change()がお勧めです。 +1 - Ja8zyjits
  • 注:ブール値propvalueは同じ出力を生成します。例えば.prop('selected', true) - Gone Coding
  • いくつかのブラウザ - おそらく古いブラウザ - によっては、文字列' selected'が必要です。私はそれらの大多数がテキスト文字列をサポートしていると思います。 - mpoletto

12

あなたはselectに名前を付けてこれを使うことができます:

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

それはあなたが望むオプションを選択するはずです。


12

これを行うにはいくつかの方法がありますが、最も優れた回答と多くの議論の中で最もクリーンなアプローチが失われています。val()。 jQuery 1.6から一部のメソッドも変更されたため、これには更新が必要です。

以下の例では、変数を仮定します。$select目的のを指すjQueryオブジェクトです。<select>タグ、例えば以下を介して:

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

gt;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 - 正確なテキストの一致

正確なテキストで一致させたい場合は、filter機能付き。例えば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 - インデックスで一致

インデックスで一致させたい場合は、単にselectの子にインデックスを付けてください。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"]しかし、属性セレクタはこれらの他のすべてのオプションと比べて比較的遅いということを覚えておく必要があります。


10

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


  • あなたの投稿をありがとう、しかしこの答えは受け入れられた答えに含まれていない会話に何を追加しますか? - Edward
  • すでに選択されているオプションがある場合、複数選択でない限り、ドロップダウンで複数の項目を選択できないため、これは失敗します。 .propを実行する必要があります('選択された'、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>


7

を使うjquery-2.1.4、私は私のために働くために次の答えを見つけた:

$('#MySelectionBox').val(123).change();

文字列値がある場合は、以下を試してください。

$('#MySelectionBox').val("extra thing").change();

他の例ではうまくいきませんでしたので、この回答を追加します。

私は元の答えを見つけました:https://forum.jquery.com/topic/how-to-dynamically-select-option-in-dropdown-menu


6

私はこれを使います、私がリストのインデックスを知っているとき。

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

これにより、リストを変更してchangeイベントを発生させることができます。 ":nth(n)"はインデックス0から数えている



5

私は一緒に行きます: -

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


5

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

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

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

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

このコードはselectorを使用して条件付きの選択オブジェクトを見つけ、それから選択された属性を次のように変更します。attr()


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


  • 私の投票はあなたに行きます...ありがとう - deemi-D-nadeem

4

これを試して

#idの代わりにselect field idを使うだけです(つまり#select_name)。

の代わりにオプション値選択オプションを使う

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


3

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


3

属性をfunctionに送信し、update-selectオプションが必要な場合に選択されたJqueryの場合

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


2

これを試してください

まさにそれはうまくいくでしょう

<script>    
    $(document).ready(function() {
    $("#id").val('select value here');
       });
        </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();

リンクされた質問


関連する質問

最近の質問