javascript - 如何使用 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 函数number 作为参数，如何在列表中选择合适的选项？

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