jQuery / Programmatically在Select Box中选择一个选项

时间:2009-10-15 17:37:09

标签: javascript jquery select

我目前正在使用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>

8 个答案:

答案 0 :(得分:79)

<强>更新

从jQuery 1.9开始,jQuery已更新更改了此功能。选项的“选定”状态实际上是一个属性,因此jQuery已将其更改为使用.prop()方法。语法非常相似且易于切换:

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

请参阅http://api.jquery.com/prop/#entry-longdesc了解为何需要通过true


较旧的jQuery

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

$('#startTime option[value='+ data[0].start +']').attr('selected', 'selected');

答案 1 :(得分:36)

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

答案 2 :(得分:10)

只是$("#startTime").val(start_time);

答案 3 :(得分:10)

更新

从jQuery 1.9开始,jQuery已更新更改了此功能。选项的“选定”状态实际上是一个属性,因此jQuery已将其更改为使用.prop()方法。语法非常相似且易于切换:

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

答案 4 :(得分:2)

jquery移动用户的附加信息(1.3.0):

这是similar example

如果您使用jquery 1.9.1和jquery mobile 1.3.0尝试上面的示例,您可以看到它不起作用,除非您添加

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

使用jquery mobile时请记住这一点。它给了我很多头痛

答案 5 :(得分:1)

出于某些原因,我的工作原理如下:

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

答案 6 :(得分:1)

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

在jQuery 1.10上为我工作

答案 7 :(得分:0)

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

如果要在选择选项后触发选定的更改事件:

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