如何使用JavaScript以编程方式设置选择框元素的值?

如果你正在使用jQuery，你也可以这样做:

$('#leaveCode').val('14');

这将选择值为14的<选项>。

使用纯Javascript，这也可以通过两个Document方法实现:

与文档。querySelector，你可以根据CSS选择器选择一个元素: document.querySelector(“# leaveCode”)。Value = '14' 使用更成熟的document.getElementById()方法，正如函数名称所暗示的那样，它将允许您根据其id选择元素: . getelementbyid(“leaveCode”)。Value = '14'

你可以运行下面的代码来查看这些方法和jQuery函数的实际运行情况:

2010-12-23 15:00:15


function foo(value)
{
    var e = document.getElementById('leaveCode');
    if(e) e.value = value;
}

2008-09-17 01:32:56

我比较了不同的方法:

JS和jQuery设置select值的不同方法比较

代码:

$(function() {
    var oldT = new Date().getTime();
     var element = document.getElementById('myId');
    element.value = 4;
    console.error(new Date().getTime() - oldT);

    oldT = new Date().getTime();
    $("#myId option").filter(function() {
        return $(this).attr('value') == 4;
    }).attr('selected', true);
    console.error(new Date().getTime() - oldT);

    oldT = new Date().getTime();
    $("#myId").val("4");
    console.error(new Date().getTime() - oldT);
});

在有~4000个元素的选择上输出:

1毫秒 58岁的女士 612毫秒

Firefox 10。注意:我做这个测试的唯一原因，是因为jQuery在我们的列表中有~2000个条目时表现非常糟糕(选项之间的文本更长)。在val()之后，我们有大约2秒的延迟。

还要注意:我设置的值取决于实际值，而不是文本值。

2012-08-10 15:50:20

我尝试了上述基于JavaScript/ jquery的解决方案，例如:

$("#leaveCode").val("14");

and

var leaveCode = document.querySelector('#leaveCode');
leaveCode[i].selected = true;

在AngularJS应用中，有一个必选的<select>元素。

它们都不起作用，因为AngularJS的表单验证没有启动。尽管选择了正确的选项(并显示在表单中)，但输入仍然无效(仍然存在ng- primitive和ng-invalid类)。

要强制AngularJS验证，在选择一个选项后调用jQuery change():

$("#leaveCode").val("14").change();

and

var leaveCode = document.querySelector('#leaveCode');
leaveCode[i].selected = true;
$(leaveCode).change();

2015-06-01 12:38:00

假设你的表单名为form1:

function selectValue(val)
{
  var lc = document.form1.leaveCode;
  for (i=0; i&lt;lc.length; i++)
  {
    if (lc.options[i].value == val)
    {
        lc.selectedIndex = i;
        return;
    }
  }
}

2008-09-17 03:03:01