jQuery / 以编程方式在选择框中选中一个选项

Question

jQuery / 以编程方式在选择框中选中一个选项

67

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

- Dodinas

1

jQuery 1.9将此从.attr()更改为.prop()。我在下面提供了更新的答案。 - Joshua

8个回答

49

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

- Corey Ballou

11

这应该成为被采纳的答案。我不理解必须要通过 Dom 进行嗅探，执行可能的字符串操作，最终设置属性值的目的。除非我漏了什么，否则直接更改选择框的值才是合理的做法。 - calcazar

12

这只是个 $("#startTime").val(start_time); 的操作。

- Jacob Mattison

这对我有用。其他选项在Safari中不起作用.. :( - Kalaschni

11

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

如果您想在选择选项后触发选中更改事件：

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

- sh497

2

简单而有效！ - Nowdeen

10

更新

从jQuery 1.9开始，jQuery已经更新了这个功能。选项的“selected”状态实际上是一个属性，因此jQuery已经改用.prop()方法。语法非常相似且易于切换：

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

- Joshua

这刚好解决了我在Firefox和Safari中遇到的一个大问题。Chrome和IE8使用.attr()时表现正常，但其他浏览器会出现错误。 - krillgar

2

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

在jQuery 1.10上对我有效。

- antoshib

2

出于某种原因，对我来说它是这样工作的：

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

- Adrian P.

1

我相信这等同于运行$('#startTime').val(toString(data[0].start))。 - thekingoftruth

2

针对jQuery Mobile用户的额外信息（1.3.0）：

这是一个类似的例子。

如果您尝试使用jQuery 1.9.1和jQuery Mobile 1.3.0运行上面的示例，您会发现它无法正常工作，除非您添加：

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

在使用jQuery Mobile时请记住这一点。它曾经让我很头疼。

- John Thompson

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Sam Hasler · Accepted Answer

更新：

从jQuery 1.9版本开始，jQuery更新了这个功能。一个选项的“selected”状态实际上是一个属性，因此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');