jQueryを使用してドロップダウンの選択したインデックスを設定します

コントロールを見つける方法が次のようである場合、jQueryでドロップダウンのインデックスを設定するにはどうすればよいですか。

$("*[id$='" + originalId + "']") 

これは、コントロールを動的に作成しているためであり、Webフォームを使用するとIDが変更されるため、これがいくつかのコントロールを見つけるための回避策であることがわかりました。しかし、jQueryオブジェクトを取得したら、選択したインデックスを0（ゼロ）に設定する方法がわかりません。

まず第一に-そのセレクターはかなり遅いです。IDを探してすべてのDOM要素をスキャンします。要素にクラスを割り当てることができれば、パフォーマンスへの影響は少なくなります。

$(".myselect")

しかし、あなたの質問に答えるために、jQueryでselect要素の値を変更するにはいくつかの方法があります

// sets selected index of a select box to the option with the value "0"
$("select#elem").val('0'); 

// sets selected index of a select box to the option with the value ""
$("select#elem").val(''); 

// sets selected index to first item using the DOM
$("select#elem")[0].selectedIndex = 0;

// sets selected index to first item using jQuery (can work on multiple elements)
$("select#elem").prop('selectedIndex', 0);

これを見つけただけで、私にとってはうまくいき、個人的には読みやすくなっています。

これは、gnarfの回答番号3オプションと同じように実際のインデックスを設定します。

// sets selected index of a select box the actual index of 0 
$("select#elem").attr('selectedIndex', 0);

これは以前は機能しませんでしたが、今は機能します...バグを参照してください：http : //dev.jquery.com/ticket/1474

補遺

コメントで推奨されるように使用します：

$("select#elem").prop('selectedIndex', 0);

私は2015年にこの回答を書いています。何らかの理由で（おそらく古いバージョンのjQuery）、他の回答はどれもうまくいきませんでした。つまり、選択したインデックスが変更されますが、実際のドロップダウンには反映されません。

インデックスを変更する別の方法を次に示します。実際には、ドロップダウンに反映させます。

$('#mydropdown').val('first').change();

私は使っています

$('#elem').val('xyz');

value = 'xyz'のオプション要素を選択する

jQueryコード：

$("#sel_status").prop('selectedIndex',1);

Jspコード：

Status:
<select name="sel_status"
    id="sel_status">
    <option value="1">-Status-</option>
    <option>ALL</option>
    <option>SENT</option>
    <option>RECEIVED</option>
    <option>DEACTIVE</option>
</select>

select要素の最初のオプションの値を取得したいとします。

$("*[id$='" + originalId + "']").val($("*[id$='" + originalId + "'] option:first").attr('value'));

2番目のオプションを選択するには

$('#your-select-box-id :nth-child(2)').prop('selected', true);

ここで、 `trigger（ 'change'）を追加してイベントを発生させます。

$('#your-select-box-id :nth-child(2)').prop('selected', true).trigger('change');

$("[id$='" + originalId + "']").val("0 index value");

0に設定します

4番目のオプションを選択

$('#select').val($('#select option').eq(3).val());

jsfiddleの例