web-dev-qa-db-ja.com

jqueryを使ってドロップダウンオプションを選択する

私はそれがドロップダウンボックスで、jQueryにオプションを選択させる、4番目の項目を言うことが可能かどうか疑問に思いましたか？

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

ユーザーにリンクをクリックしてもらい、オプションボックスをクリックして選択したように、選択ボックスで値を変更します。

javascriptjqueryhtmlselectdrop-down-menu
143
dotty

どうですか？

$('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/ の例

172
Gabriele Petrioli

ソリューション：

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

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;
48
Ja͢ck

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

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

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

$('select').val();

また、あなたが<option value="valueToSelect">...</option>を持っているなら、あなたはできる：

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

デモ

22
Ionică Bizău

私はこうします

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

あなたのオプションに価値があるなら、あなたはこれをすることができます：

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

'select'はあなたのselectまたはクラスセレクタのIDです。選択が1つだけの場合は、例のようにタグを使用できます。

19
Victor

特定の値を持つオプションを選択したい場合は、次のコードを使用してください。

$('select>option[value="' + value + '"]').prop('selected', true);
8
nlareu
 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
Mamun Rasid

これを試して：

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

よろしく！

3
Nicolas Finelli

''要素では通常 'value'属性を使います。それを設定するのが簡単になります：

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

Eq（）よりもnth-child（）のほうが0ベースではなく1ベースのインデックスを使用しているので、私の頭脳では少し簡単です。

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

idで答えてください。

$('#selectBoxId').find('option:eq(0)').attr('selected', true);
2
Javad Masoumi
 $('select>option:eq(3)').attr('selected', 'selected');

ここで注意しなければならないのは、JavaScriptがselect/optionのchangeイベントを監視しているのであれば、.trigger('change')を追加してコードにする必要があります。

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

.attr('selected', 'selected')を呼び出しただけではイベントは発生しません。

0
kanitw