我想设置一个选项,之前选择显示在页面加载。我尝试了下面的代码:
$("#gate").val('Gateway 2');
with
<select id="gate">
<option value='null'>- choose -</option>
<option value='gateway_1'>Gateway 1</option>
<option value='gateway_2'>Gateway 2</option>
</select>
但这并不奏效。什么好主意吗?
我发现使用jQuery .val()方法有一个显著的缺点。
<select id="gate"></select>
$("#gate").val("Gateway 2");
如果该选择框(或任何其他输入对象)位于表单中,并且表单中使用了重置按钮,那么当单击重置按钮时,设置的值将被清除,而不是像您所期望的那样重置为初始值。
这似乎最适合我。
对于选择框
<select id="gate"></select>
$("#gate option[value='Gateway 2']").attr("selected", true);
对于文本输入
<input type="text" id="gate" />
$("#gate").attr("value", "your desired value")
对于textarea输入
<textarea id="gate"></textarea>
$("#gate").html("your desired value")
对于复选框
<input type="checkbox" id="gate" />
$("#gate option[value='Gateway 2']").attr("checked", true);
单选按钮
<input type="radio" id="gate" value="this"/> or <input type="radio" id="gate" value="that"/>
$("#gate[value='this']").attr("checked", true);
我知道这是一个公认的答案,但在阅读答案的回复时,我看到了一些我可以澄清的东西,这些东西可能会帮助其他人解决在值更改后没有触发事件的问题。
这将在下拉菜单中选择值:
$("#gate").val("gateway_2")
如果这个选择元素使用JQueryUI或其他JQuery包装器,使用包装器的刷新方法来更新UI,以显示值已被选中。下面的例子是针对JQueryUI的,但是你必须查看你正在使用的包装器的文档,以确定正确的刷新方法:
$("#gate").selectmenu("refresh");
如果需要触发一个事件,例如更改事件,则必须手动触发该事件,因为更改值不会触发该事件。你需要触发的事件取决于事件是如何创建的:
如果事件是用JQuery创建的,即$("#gate").on("change",function(){})然后使用下面的方法触发事件:
$("#gate").change();
如果事件是使用标准JavaScript事件创建的,则使用以下方法触发事件:
var JSElem = $("#gate")[0];
if ("createEvent" in document) {
var evt = document.createEvent("HTMLEvents");
evt.initEvent("change", false, true);
JSElem.dispatchEvent(evt);
} else {
JSElem.fireEvent("onchange");
}
除了@icksde和@Korah(谢谢两位!)
当使用AJAX构建文档的选项时。Ready可能在构建列表之前被触发,因此这可能会提供一些见解。
超时确实有效,但正如@icksde所说,它很脆弱。最好把它放在AJAX函数中,像这样:
$("#someObject").change(function() {
$.get("website/page.php", {parameters}, function(data) {
$("#gate").append("<option value='Gateway 2'">" + "Gateway 2" + "</option>");
$("#gate").val('Gateway 2');
}, "json");
});