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

Question

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

Answer 1

selectElement('leaveCode', '11')

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

Answer 2

如果你使用的是jQuery,你也可以这样做

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

这将选择值为14的选项

编辑:

使用普通的Javascript,这也可以通过两种Document方法实现

使用querySelector,您可以选择基于CSS选择器的元素

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

或者更成熟的方法,使用getDocumentById,就像函数的名称所暗示的那样,让你选择一个基于那里的元素<option>

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>

Answer 3

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

Answer 4

短的

这是威廉答案的尺寸改进

leaveCode.value = '14';

leaveCode.value = '14';

leaveCode.value = '14';

Answer 5

没有回答问题,但您也可以通过索引进行选择,其中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;

Answer 6

我比较了不同的方法:

比较如何使用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个元素的选择上的输出:

1毫秒

58毫秒

612毫秒

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

另请注意:我根据实际值而不是文本值设置值

Answer 7

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

这应该将选择设置为"年假"

Answer 8

我尝试了上面基于JavaScript/jQuery的解决方案,例如:

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

和

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

在AngularJS应用程序中,有一个必需的 <select>元素.

它们都不起作用,因为不会触发AngularJS表单验证.虽然选择了正确的选项(并显示在表单中),但输入仍然无效(ng-pristine和ng-invalid类仍然存在).

要强制进行AngularJS验证,请在选择选项后调用jQuery change():

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

和

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