设置选择框的选中选项答案

【问题标题】：Set selected option of select box设置选择框的选中选项
【发布时间】：2011-06-08 11:33:10
【问题描述】：

我想将之前选择的选项设置为在页面加载时显示。我用下面的代码试了一下：

$("#gate").val('Gateway 2');

与

<select id="gate">
    <option value='null'>- choose -</option>
    <option value='gateway_1'>Gateway 1</option>
    <option value='gateway_2'>Gateway 2</option>
</select>

但这不起作用。有什么想法吗？

【问题讨论】：

实际上它应该是这样工作的，你确定你在 document.ready() 中设置了值吗？ Maybe the code is executed when the selectbox isn't ready yet.

标签： jquery html jquery-selectors html-select

【解决方案1】：

这绝对应该有效。 Here's a demo。确保您已将代码放入 $(document).ready:

$(function() {
    $("#gate").val('gateway_2');
});

【讨论】：

好的，当我下拉列表时，它会突出显示但不显示为列表中的第一个元素
啊，我没有在文档就绪函数中声明它......谢谢！
不如将属性“selected”设置为“selected”。
@Adal 为什么这不如将'selected'属性设置为'selected'？
以防万一其他人想知道，传递给函数val 的'Gateway 2' 与选择选项的value 属性的值匹配，而不是其文本。请参阅 this JSFiddle，这是 Darin 演示的一个非常温和的编辑版本，以了解我的意思。

【解决方案2】：

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

【讨论】：

你拯救了我的一天，现在我可以度过一个愉快的周末了。谢谢大佬

【解决方案3】：

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

【讨论】：

与$('#your-select-box-id :nth-child(2)').prop('selected', true) 非常相似，它的工作原理是对下拉框进行视觉更新。
只有一个对我有用。怀疑是因为我使用的是自定义选择库。

【解决方案4】：

  $("#form-field").val("5").trigger("change");

【讨论】：

如果您能提供一些有关此的信息，那就太好了。这是一个很好的例子，说明你应该如何做到这一点，如果你有代码正在监视选择的变化。
非常感谢，这正是我想要的。如果您使用 ajax 更新选择框的值，这是完美的答案。
需要添加.trigger("change"); 以便我的工作。谢谢。

【解决方案5】：

我发现使用 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 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);

【讨论】：

【解决方案6】：

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

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

另外，您可能有两个具有相同 ID 的元素吗？

【讨论】：

【解决方案7】：

这将是另一种选择：

$('.id_100 option[value=val2]').prop('selected', true);

【讨论】：

【解决方案8】：

我遇到了同样的问题。

解决方案：添加刷新。

$("#gate").val('Gateway 2');
$("#gate").selectmenu('refresh');

【讨论】：

这仅适用于 jqueryui 选择菜单，不适用于标准 html

【解决方案9】：

有些情况可能

$('#gate option[value='+data.Gateway2+']').attr('selected', true);

【讨论】：

【解决方案10】：

我知道答案有多次迭代，但现在这不需要 jquery 或任何其他外部库，只需使用以下内容即可轻松完成。

document.querySelector("#gate option[value='Gateway 2']").setAttribute('selected',true);

<select id="gate">
    <option value='null'>- choose -</option>
    <option value='Gateway 1'>Gateway 1</option>
    <option value='Gateway 2'>Gateway 2</option>
</select>

【讨论】：

很好的解决方案。但看起来它不会从以前选择的选项中删除选定的属性

【解决方案11】：

我知道这有一个可接受的答案，但在阅读对答案的回复时，我发现了一些我可以澄清的事情，这些事情可能会帮助其他人在值更改后遇到事件未触发的问题。

这将选择下拉列表中的值：

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

【讨论】：

【解决方案12】：

我的问题

get_courses(); //// To load the course list
$("#course").val(course); //// Setting default value of the list

我有同样的问题。与您的代码的唯一区别是我正在通过 ajax 调用加载选择框，并且在执行 ajax 调用后我已经设置了选择框的默认值

解决方案

get_courses();
   setTimeout(function() {
     $("#course").val(course);
  }, 10);

【讨论】：

您对问题的分析是正确的，但解决方案很糟糕而且很脆弱。您必须使用附加到您的 ajax 调用的回调函数

【解决方案13】：

由于调用前的语法错误，我遇到了一个问题，即未设置值。

$("#someId").value(33); //script bailed here without showing any errors Note: .value instead of .val
$("#gate").val('Gateway 2'); //this line didn't work.

在调用之前检查语法错误。

【讨论】：

提醒检查语法错误很有用，但这不是答案。

【解决方案14】：

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

【讨论】：

【解决方案15】：

// Make option have a "selected" attribute using jQuery

var yourValue = "Gateway 2";

$("#gate").find('option').each(function( i, opt ) {
    if( opt.value === yourValue ) 
        $(opt).attr('selected', 'selected');
});

【讨论】：

这将循环甚至超过选定的值，这是低效的
Plus .attr() 在发布此答案之前就一直是错误的做法。

【解决方案16】：

除了@icksde 和@Korah（谢谢！）

使用 AJAX 构建 options 时可能会在构建列表之前触发 document.ready，因此

这不起作用

$(document).ready(function() {
    $("#gate").val('Gateway 2');
});

确实如此

超时确实有效，但正如@icksde 所说，它很脆弱（我确实需要 20 毫秒而不是 10 毫秒）。最好将它放入 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");
});

【讨论】：