我有以下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函数，如何在列表中选择适当的选项？ />

评论

请参阅我的答案以比较不同方法的性能

#1 楼

您可以使用以下功能：

 selectElement('leaveCode', '11')

function selectElement(id, valueToSelect) {    
    let element = document.getElementById(id);
    element.value = valueToSelect;
}


评论

很好的答案，这比遍历选项更容易。而且符合标准：dev.w3.org/html5/spec/…。如果存在浏览器不兼容（当然有:)，我将非常有兴趣知道它们是什么。这通常是您在ppk上需要依靠的东西，但是他顽固地拒绝出现在我对此主题的搜索中。

– Philo
2012年5月22日17:47
那多重选择呢？如果有多个选项（至少在Chrome 25中），这似乎不起作用。

–Georgii Ivankin
13年4月4日在16:13
正如@ ring0所指出的，当valueToSelect不存在时，它将在chrome中插入一个空白条目。而IE和firefox保留最后选择的值。

– Karthik Bose
15年6月24日在4:55
IE的注意事项：

#2 楼

如果您使用的是jQuery，还可以执行以下操作：

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

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


使用普通Javascript，也可以通过以下两种Document方法来实现：



通过document.querySelector，您可以基于CSS选择器选择元素：

document.querySelector('#leaveCode').value = '14'



使用更成熟的方法document.getElementById()，正如函数名称所暗示的那样，让您根据其id选择一个元素：

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




评论

这也可以用于多选。只需将字符串数组而不是单个字符串传递给'val'函数即可。请参阅：stackoverflow.com/a/16583001/88409

– Triynko
2015年12月22日在21:38


有没有办法通过这样做也触发$（'＃leaveCode'）。on（'change'，function（）吗？

– Lieuwe
16-11-24在16:56


$（“＃leaveCode”）。val（“ 14”）。change（）;

–劳伦
17年6月19日在19:28

#3 楼

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


#4 楼

不回答问题，但您也可以按索引选择，其中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;


评论

不应该形成Obj.leaveCode [i] .selected = true;是formObj.options [i] .selected = true; ？

–大卫·克里斯托弗·雷诺兹（David Christopher Reynolds）
17年10月3日，9：58

#5 楼

我比较了不同的方法：

比较如何用JS或jQuery设置选择值的不同方法

代码：

 $(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个元素的select上的输出：


1 ms
58 ms
612 ms

使用Firefox10。注意：我进行此测试的唯一原因是，因为jQuery在我们的列表中的性能非常差，有大约2000个条目（它们的使用时间更长）
在val（）之后大约有2 s的延迟。

也请注意：我是根据实际值而不是文本值来设置值。 />

#6 楼

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

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


和

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


一个AngularJS应用，其中有一个必需的