我比较了不同的方法:

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

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

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

function setSelectValue (id, val) {
    document.getElementById(id).value = val;
}
setSelectValue('leaveCode', 14);

为什么不为元素的Id添加一个变量，使其成为一个可重用的函数呢?

function SelectElement(selectElementId, valueToSelect)
{    
    var element = document.getElementById(selectElementId);
    element.value = valueToSelect;
}

如果你正在使用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>

短

这是威廉回答的尺寸改进

leaveCode.value = '14';

leaveCode。价值= 14; <选择id=“leaveCode” <option value=“10”>Annual Leave</option> <option value="11">保单</option> <option value=“14”>Long Service</option> <option value="17">离开无报酬</option> 选择< - >