Question

我想设置之前选择的选项，以便在页面加载时显示。我用以下代码尝试了它：

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

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

Answer 1

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

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

Answer 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
});

Answer 3

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

Answer 4

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

Answer 5

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

Answer 6

工作正常。看到这个小提琴：http://jsfiddle.net/kveAL/

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

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

Answer 7

这将是另一种选择：

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

Answer 8

我遇到了同样的问题。

解决方案：添加刷新。

SELECT percentiles[offset(25)], percentiles[offset(50)], percentiles[offset(75)]
FROM (SELECT APPROX_QUANTILES(column, 100) percentiles FROM Table)

Answer 9

我的问题

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);

Answer 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>

Answer 11

某些情况可能是

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

Answer 12

我知道这是一个可以接受的答案，但是在阅读答案时，我发现一些可以清除的内容可能会帮助其他人，例如遇到值更改后不会触发事件的问题。

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

$("#gate").val("gateway_2")

如果此选择元素正在使用JQueryUI或其他JQuery包装器，请使用包装器的refresh方法更新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");
}

Answer 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.

在通话前检查语法错误。

Answer 14

// 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');
});

Answer 15

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

Answer 16

除了@icksde和@Korah（两者兼得！）

使用AJAX构建选项 时，可能会在构建列表之前触发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");
});

设置选择框的选定选项

16 个答案: