设置选择框的选定选项

Upv*_*ote 337 html jquery html-select jquery-selectors

我想设置一个先前选择的选项,以便在页面加载时显示.我用以下代码尝试了它:

$("#gate").val('Gateway 2');
Run Code Online (Sandbox Code Playgroud)

<select id="gate">
    <option value='null'>- choose -</option>
    <option value='gateway_1'>Gateway 1</option>
    <option value='gateway_2'>Gateway 2</option>
</select>
Run Code Online (Sandbox Code Playgroud)

但这不起作用.有任何想法吗?

Dar*_*rov 478

这肯定应该工作.这是一个演示.确保已将代码放入$(document).ready:

$(function() {
    $("#gate").val('gateway_2');
});
Run Code Online (Sandbox Code Playgroud)

  • 为了防止其他人想知道,传递给函数`val`的`'Gateway 2'`匹配select选项的`value`属性的值,而不是它的文本.参见[这个JSFiddle](http://jsfiddle.net/kenny_evitt/CpXVB/1178/),这是Darin演示的一个非常温和的编辑版本,我的意思是一个例子. (26认同)
  • 不如将"已选择"属性设置为"已选择". (7认同)
  • @Adal为什么这不如将'selected'属性设置为'selected'一样好? (6认同)
  • 好吧,当我下拉列表时,它会突出显示但不会显示为列表中的第一个元素 (4认同)
  • 啊,我宣布它不在文件准备功能...谢谢! (2认同)

Zko*_*koh 157

$(document).ready(function() {
    $("#gate option[value='Gateway 2']").prop('selected', true);
    // you need to specify id of combo to set right combo, if more than one combo
});
Run Code Online (Sandbox Code Playgroud)


小智 36

$('#gate').val('Gateway 2').prop('selected', true);

  • 与`$('#your-select-box-id :nth-child(2)').prop('selected', true)` 非常相似,它可以对下拉框进行视觉更新。 (2认同)

小智 15

我发现使用jQuery .val()方法有一个明显的缺点.

<select id="gate"></select>
$("#gate").val("Gateway 2");
Run Code Online (Sandbox Code Playgroud)

如果此选择框(或任何其他输入对象)在表单中并且表单中使用了重置按钮,则单击重置按钮时,设置值将被清除,并且不会像您期望的那样重置为开始值.

这似乎对我来说是最好的.

对于选择框

<select id="gate"></select>
$("#gate option[value='Gateway 2']").attr("selected", true);
Run Code Online (Sandbox Code Playgroud)

用于文本输入

<input type="text" id="gate" />
$("#gate").attr("value", "your desired value")
Run Code Online (Sandbox Code Playgroud)

对于textarea输入

<textarea id="gate"></textarea>
$("#gate").html("your desired value")
Run Code Online (Sandbox Code Playgroud)

对于复选框

<input type="checkbox" id="gate" />
$("#gate option[value='Gateway 2']").attr("checked", true);
Run Code Online (Sandbox Code Playgroud)

对于单选按钮

<input type="radio" id="gate" value="this"/> or <input type="radio" id="gate" value="that"/>
$("#gate[value='this']").attr("checked", true);
Run Code Online (Sandbox Code Playgroud)


Moh*_*hir 12

  $("#form-field").val("5").trigger("change");
Run Code Online (Sandbox Code Playgroud)

  • 如果您在这方面包含一些信息,那就太好了。这是一个很好的示例,说明您应该如何执行此操作,如果您有代码正在监视对选择的更改。 (2认同)

Jam*_*man 6

这很好.看到这个小提琴:http://jsfiddle.net/kveAL/

您可能需要在$(document).ready()处理程序中声明您的jQuery 吗?

另外,你可能有两个具有相同ID的元素吗?


小智 6

我有同样的问题。

解决方法:添加刷新。

$("#gate").val('Gateway 2');
$("#gate").selectmenu('refresh');
Run Code Online (Sandbox Code Playgroud)

  • 这仅适用于 jqueryui 选择菜单,而不适用于标准 html (3认同)

Ken*_*lar 5

这将是另一种选择:

$('.id_100 option[value=val2]').prop('selected', true);
Run Code Online (Sandbox Code Playgroud)