我比较了不同的方法:

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秒的延迟。

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

这里提到的大部分代码都不适合我!

最后，这招奏效了

窗口。addEventListener很重要，否则，你的JS代码将在Options中获取值之前运行

    window.addEventListener("load", function () {
            // Selecting Element with ID - leaveCode  //
            var formObj = document.getElementById('leaveCode');

            // Setting option as selected
            let len;
            for (let i = 0, len = formObj.length; i < len; i++){
                if (formObj[i].value == '<value to show in Select>') 
                 formObj.options[i].selected = true;
            }
    });

希望这有帮助!

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

document.getElementById('leaveCode').value = '10';

这应该会将选择设置为“年假”

恐怕我现在无法测试这个，但在过去，我相信我必须给每个选项标签一个ID，然后我做了如下的事情:

document.getElementById("optionID").select();

如果这行不通，也许它会让你更接近一个解决方案:P

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

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

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

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

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

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

const jQueryFunction = () => { $('#leaveCode').val('14'); } const querySelectorFunction = () => { document.querySelector('#leaveCode').value = '14' } const getElementByIdFunction = () => { document.getElementById('leaveCode').value='14' } input { display:block; margin: 10px; padding: 10px } <select id="leaveCode" name="leaveCode"> <option value="10">Annual Leave</option> <option value="11">Medical Leave</option> <option value="14">Long Service</option> <option value="17">Leave Without Pay</option> </select> <input type="button" value="$('#leaveCode').val('14');" onclick="jQueryFunction()" /> <input type="button" value="document.querySelector('#leaveCode').value = '14'" onclick="querySelectorFunction()" /> <input type="button" value="document.getElementById('leaveCode').value = '14'" onclick="getElementByIdFunction()" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>