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

Dod*_*nas 53 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>
Run Code Online (Sandbox Code Playgroud)

如果我的JSON值是:

 var start_time = data[0].start  // Let's say this is '17:00:00'
Run Code Online (Sandbox Code Playgroud)

我怎样才能使用jQuery选择值为'17:00:00'的选项?

 <option value="17:00:00" selected="selected">5:00 pm</option>
Run Code Online (Sandbox Code Playgroud)

Sam*_*ler 83

更新:

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

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

请参阅http://api.jquery.com/prop/#entry-longdesc了解其需要通过的原因true.


较旧的jQuery

$('#startTime option[value=17:00:00]').attr('selected', 'selected');
Run Code Online (Sandbox Code Playgroud)

要么

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

  • 好答案.我可能还建议考虑哪个选择框如下:$('#mySelect option [value ="17:00:00"]').attr('selected','selected'); (11认同)
  • 如果您有javascript正在观看select/option的更改事件,则需要添加.trigger('change')以便触发该事件. (3认同)
  • 你不应该先取消选择其他选项吗? (2认同)
  • 它应该是`.... prop('selected',true);`你是在表示非空字符串被评估为true ... (2认同)

Cor*_*lou 38

$('#startTime').val(start_time);
Run Code Online (Sandbox Code Playgroud)

  • 这需要是公认的答案.我不明白必须嗅探Dom,执行可能的字符串操作,并最终设置属性值的目的.除非我遗漏了某些内容,否则更改选择框的值是有意义的.. (6认同)

Jac*_*son 10

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


Jos*_*hua 10

UPDATE

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

$('option[value=17:00:00]').prop('selected', 'selected');
Run Code Online (Sandbox Code Playgroud)


小智 7

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

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

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

  • 简单又有效! (2认同)