我有以下 HTML<select>元素：
<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>
使用以leaveCode数字为参数的 JavaScript 函数，如何在列表中选择合适的选项？
您可以使用此功能：
selectElement('leaveCode', '11')
function selectElement(id, valueToSelect) {
let element = document.getElementById(id);
element.value = valueToSelect;
}
如果您使用 jQuery，您也可以这样做：
$('#leaveCode').val('14');
这将选择<option>值为 14 的 。
使用普通的 Javascript，这也可以通过两种Document方法实现：
使用document.querySelector，您可以根据 CSS 选择器选择元素：
document.querySelector('#leaveCode').value = '14'
使用更成熟的方法 with document.getElementById()，正如函数名称所暗示的那样，您可以根据其选择一个元素id：
document.getElementById('leaveCode').value = '14'
您可以运行以下截取的代码来查看这些方法和 jQuery 函数的运行情况：
function setSelectValue (id, val) {
document.getElementById(id).value = val;
}
setSelectValue('leaveCode', 14);
不回答问题，但您也可以按索引选择，其中 i 是您要选择的项目的索引：
var formObj = document.getElementById('myForm');
formObj.leaveCode[i].selected = true;
您还可以使用循环遍历要按显示值选择的项目：
for (var i = 0, len < formObj.leaveCode.length; i < len; i++)
if (formObj.leaveCode[i].value == 'xxx') formObj.leaveCode[i].selected = true;
我比较了不同的方法：
代码：
$(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 个元素的选择输出：
使用 Firefox 10。 注意：我做这个测试的唯一原因是因为 jQuery 在我们的列表中表现非常糟糕，有大约 2000 个条目（它们在选项之间有更长的文本）。在 val() 之后我们有大约 2 秒的延迟
还要注意：我根据实际值设置值，而不是文本值。