如何使用 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 函数，如何在列表中选择适当的选项？

原文由 brasskazoo 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 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'))

原文由 Mitchel Sellers 发布，翻译遵循 CC BY-SA 4.0 许可协议

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

原文由 Einar Ólafsson 发布，翻译遵循 CC BY-SA 4.0 许可协议