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

javascript dom html

2022-08-29 22:59:37

我有以下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>

使用以数字为参数的JavaScript函数，如何在列表中选择适当的选项？leaveCode

答案 1

您可以使用此功能：

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

selectElement('leaveCode', '11');

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

（可选）如果还希望触发 onchange 事件，则可以使用：

element.dispatchEvent(new Event('change'))

答案 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>