web-dev-qa-db-ja.com

jQuery /プログラムで選択ボックスのオプションを選択する

現在、jQueryを使用してJSON結果を返しています。これらの結果が返されたら、それらを使用してフォームのフィールドに事前入力します。

ただし、ドロップダウンボックスでアイテムを事前に選択するには、ヘルプが必要です。たとえば、選択ボックスがあります（これは短縮されています）。

<select id="startTime">
<option value="14:00:00">2:00 pm</option>
<option value="15:00:00">3:00 pm</option>
<option value="16:00:00">4:00 pm</option>
<option value="17:00:00">5:00 pm</option>
<option value="18:00:00">6:00 pm</option>
</select>

JSON値が次の場合：

 var start_time = data[0].start  // Let's say this is '17:00:00'

JQueryを使用して、値「17:00:00」が選択されたオプションを作成するにはどうすればよいですか？

 <option value="17:00:00" selected="selected">5:00 pm</option>
javascriptjqueryselect
50
Dodinas

更新：

JQuery 1.9の時点で、jQueryはこの機能を変更しました。オプションの「選択された」状態は実際にはプロパティであるため、jQueryは.prop（）メソッドを使用するようにこれを変更しました。構文は非常に似ており、簡単に切り替えることができます。

$('#startTime option[value=17:00:00]').prop('selected', true);

trueを渡す必要がある理由については、 http://api.jquery.com/prop/#entry-longdesc を参照してください。

古いjQuery

$('#startTime option[value=17:00:00]').attr('selected', 'selected');

または

$('#startTime option[value='+ data[0].start +']').attr('selected', 'selected');
81
Sam Hasler
$('#startTime').val(start_time);
36
Corey Ballou

ただ$("#startTime").val(start_time);

10
Jacob Mattison

更新

JQuery 1.9の時点で、jQueryはこの機能を変更しました。オプションの「選択された」状態は実際にはプロパティであるため、jQueryは.prop（）メソッドを使用するようにこれを変更しました。構文は非常に似ており、簡単に切り替えることができます。

$('option[value=17:00:00]').prop('selected', 'selected');
10
Joshua
var varValue="17:00:00";
$("#startTime").ready(function(){ 
   $("#startTime option[value='"+varValue+"']").prop("selected", "selected"); });

JQuery 1.10で動作します

2
antoshib

Jqueryモバイルユーザー向けの追加情報（1.3.0）：

同様の例 です。

上記の例をjquery 1.9.1とjquery mobile 1.3.0で試してみると、追加しない限り機能しないことがわかります。

$("#location_list").selectmenu("refresh");

Jquery mobileを使用する場合は、このことに留意してください。それは私に多くの頭痛を与えました

2
John Thompson

何らかの理由で、次のように動作します。

$('#startTime').val(''+data[0].start+'');
1
Adrian P.

$('#startTime').val(start_time);

オプションを選択した後に選択した変更イベントをトリガーする場合：

$('#startTime').trigger("change");

1
sh497