javascripthtmldom

How do I programmatically set the value of a select box element using JavaScript?


I have the following HTML <select> element:

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

Using a JavaScript function with the leaveCode number as a parameter, how do I select the appropriate option in the list?


Solution

  • You can use this function:

    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>

    Optionally if you want to trigger onchange event also, you can use :

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