我想设置一个选项,之前选择显示在页面加载。我尝试了下面的代码:

$("#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>

但这并不奏效。什么好主意吗?


当前回答

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

是否有可能需要在$(document).ready()处理程序中声明jQuery ?

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

其他回答

我知道有几个迭代的答案,但现在这不需要jquery或任何其他外部库,可以很容易地完成只需以下。

文档。querySelector("#gate选项[value='Gateway 2']").setAttribute('selected',true); <选择id = "门" > <option value='null'>- choose -</option> . <option value='Gateway 1'>Gateway 1</option> . /option> . /option> <option value='Gateway 2'>Gateway 2</option> < /选择>

$(function() {
$("#demo").val('hello');
});

我知道这是一个公认的答案,但在阅读答案的回复时,我看到了一些我可以澄清的东西,这些东西可能会帮助其他人解决在值更改后没有触发事件的问题。

这将在下拉菜单中选择值:

$("#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");
});

美元(文件).准备功能(){ 美元(“# selectBoxId选项[value = " val2”)”。(selected’,真正的道具); }); <剧本剧本src = " https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js " > < / > 选择< id =“selectBoxId > <选项价值= >“val1 Option1 < /选项> <选项价值= >“val2 Option2 < /选项> <选项价值= >“val3 Option3 < /选项> 选择< - >