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

【问题标题】：jQuery / Programmatically Select an Option in Select BoxjQuery /以编程方式在选择框中选择一个选项
【发布时间】：2010-12-07 03:10:51
【问题描述】：

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

【问题讨论】：

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

标签： javascript jquery select

【解决方案1】：

更新：

从 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');

【讨论】：

好答案。我可能还建议考虑这样的选择框： $('#mySelect option[value="17:00:00"]').attr('selected','selected');
如果您有 javascript 监视选择/选项的更改事件，您需要添加 .trigger('change') 以便触发该事件。
如果你有一个“默认值”，这将不起作用，例如“选择一个选项...”的值=“”。至少在 Chrome 中，它会显示您选择了 2 个选项，默认选项和您以编程方式选择的选项。漏洞？无论如何，请改用$('#startTime').val(start_time);
你不应该先取消选择其他选项吗？
它应该是 ....prop('selected', true); 你正在探索非空字符串被评估为 true ...

【解决方案2】：

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

【讨论】：

这必须是公认的答案。我不明白必须嗅探 Dom、执行可能的字符串操作并最终设置属性值的目的。除非我遗漏了什么，否则更改选择框的值才有意义..

【解决方案3】：

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

【讨论】：

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

【解决方案4】：

更新

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

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

【讨论】：

这解决了我只在 Firefox 和 Safari 中遇到的一个大问题。 Chrome 和 IE8 的行为与 .attr() 的预期一样，但其他的都坏了。

【解决方案5】：

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

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

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

【讨论】：

简单有效！

【解决方案6】：

出于某种原因，它是这样工作的：

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

【讨论】：

我相信这相当于运行$('#startTime').val(toString(data[0].start))

【解决方案7】：

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

这是similar example。

如果您使用 jquery 1.9.1 和 jquery mobile 1.3.0 尝试上面的示例，您会发现它无法正常工作，除非您添加一个

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

在使用 jquery mobile 时请记住这一点。这让我很头疼

【讨论】：

【解决方案8】：

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

在 jQuery 1.10 上为我工作

【讨论】：