jQueryを使用してドロップダウンオプションを選択する方法

157

<option>ドロップダウンボックスでjQueryに、たとえば4番目の項目を選択させることができるかどうか疑問に思っていましたか？

<select>
    <option></option>
    <option></option>
    <option></option>
    <option></option>
    <option></option>
</select>

ユーザーがリンクをクリックしてから、ユーザーがをクリックしてリンク<select>を選択したかのように、ボックスに値を変更させたい<option>。

— 義母
ソース

4

あなたのオプションには価値がありますか？

— ビクター

184

いかがですか

$('select>option:eq(3)').attr('selected', true);

http://www.jsfiddle.net/gaby/CWvwn/の例

jqueryの最新バージョンでは、.prop()代わりに.attr()

$('select>option:eq(3)').prop('selected', true);

http://jsfiddle.net/gaby/CWvwn/1763/の例

— ガブリエレ・ペトリオーリ
ソース

3

これはうまくいかないはずです。オプションの選択状態ではなく、自分自身を選択する:)の状態変更によってトリガされなければならない

— ジャック・

1

selectElement.selectedIndex = index;ジャックの意味です。

— rlemon 2013年

@rlemon、私は理解していますがselectedIndex、multiple属性が使用されている場合、複数選択には使用できません。そして、選択された要素を設定する通常の（html）方法は、要素のselected属性ですoption。

— ガブリエレペトリオーリ2013年

@ GabyakaG.Petrioli通常の方法は、実際にはselected対応する各options要素のプロパティをtrue（およびオプションで残りをfalse明示的に）設定することです。複数選択は、実際にはかなり厄介です:)

— ジャック

6

@sunnyiitkgp onchange値がプログラムによって変更されても、イベントはトリガーされません。.trigger('change')最後にa を追加して、イベントを発生させることもできます（ただし、実際に変更された値に関係なく発生します）

— Gabriele Petrioli

149

ソリューション：

$("#element-id").val('the value of the option');

— ハロルド・ソタ
ソース

2

selectedHTMLでオプションを設定しません。

— Ahmad hamza 14

54

HTMLのselect要素にはselectedIndex、特定のオプションを選択するために書き込むことができるプロパティがあります。

$('select').prop('selectedIndex', 3); // select 4th option

プレーンJavaScriptを使用すると、これは次の方法で実現できます。

// use first select element
var el = document.getElementsByTagName('select')[0]; 
// assuming el is not null, select 4th option
el.selectedIndex = 3;

— ジャイク
ソース

7

これは受け入れられる答えになるはずです...それは最もクリーンでクリーンなソリューションのように見えます...

— DenysSéguret'31 / 01/01

1

問題は、「onchange」イベントを発生させないことです。

— Guy Korland 2013年

2

@GuyKorlandこれは、ここに示されている他のいずれの回答でも発生しません。イベントを発生させたい場合は、手動で実行する必要があります。

— ジャック・

1

@ジャック短い方法はありますか？私が見つけた唯一の方法：var fireEvent = function（selectElement）{if（selectElement）{if（ "fireEvent" in selectElement）{selectElement.fireEvent（ "onchange"）; } else {var evt = document.createEvent（ "HTMLEvents"）; evt.initEvent（ "change"、false、true）; selectElement.dispatchEvent（evt）; }}}

— ガイコーランド2013年

4

@GuyKorland jQueryは.trigger()そのために公開しますが、すでにコードでこれを行っているので、変更ハンドラーを自分で呼び出すのも簡単です。

— ジャック

30

私はこのようにします

 $("#idElement").val('optionValue').trigger('change');

— フランジスク
ソース

3

これが選択された答えになるはずです

— うずまきナルト

2

$（ "＃idElement"）。val（ 'optionValue'）。change（）も機能する

— Ullullu

24

オプションに値がある場合、これを行うことができます：

$('select').val("the-value-of-the-option-you-want-to-select");

「select」は、selectまたはクラスセレクターのIDです。または、selectが1つしかない場合は、例のようにタグを使用できます。

— ビクター
ソース

2

それがまさに私が必要としていたことです。ありがとう。

— chapman84

23

最も簡単な方法はval(value)関数です。

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

選択した値を取得するには、引数を指定しません。

$('select').val();

また、あなたが持っている場合は<option value="valueToSelect">...</option>、次のことができます：

$('select').val("valueToSelect");

デモ

— イオニカビザウ
ソース

$（ '＃SelectCtrlId'）。val（ 'ValueToSelect'）;も機能しました

— サイ

9

特定の値を持つオプションを選択する場合は、次のコードを使用します。

$('select>option[value="' + value + '"]').prop('selected', true);

— nlareu
ソース

$（ 'select'）。val（value）; なぜそんなに真剣なんだ？;）

— Zeeshan

1

@Zee回答済みのコードでは、複数の選択も可能です。

— Azghanvi 2017

5

 Try with the below codes. All should work. 
    $('select').val(2);
    $('select').prop('selectedIndex', 1);
    $('select>option[value="5"]').prop('selected', true);
    $('select>option:eq(3)').attr('selected', 'selected');
    $("select option:contains(COMMERCIAL)").attr('selected', true);

— マムン・ラシド
ソース

3

eq（）よりもnth-child（）の方が好まれます。0ベースではなく1ベースのインデックスを使用するためです。

//selects the 2nd option
$('select>option:nth-child(2)').attr('selected', true);

— リー・D
ソース

「1ベースのインデックス」は、日付で物事を操作するときに適しています。多くのトラブルから私を救います。ありがとう。

— TCB13 2012

3

''要素では通常、「value」属性を使用します。設定が簡単になります：

$('select').val('option-value');

— サバラトカー
ソース

3

これを試して：

$('#mySelectElement option')[0].selected = true;

よろしく！

— ニコラ・フィネッリ
ソース

2

IDで回答：

$('#selectBoxId').find('option:eq(0)').attr('selected', true);

— ジャバド・マソウミ
ソース

1

 $('select>option:eq(3)').attr('selected', 'selected');

ここでの注意点の1つは、select / optionのchangeイベントを監視するJavaScriptがある場合.trigger('change')、コードを追加するために追加する必要があることです。

 $('select>option:eq(3)').attr('selected', 'selected').trigger('change');

呼び出しだけで.attr('selected', 'selected')はイベントはトリガーされないため

— カニット
ソース