<form>
  <div>
    <label for="reasonSelect" class="required-field-label">Delay Reason for All Employees</label>
    <select id="reasonSelect" name="reasonSelect">
      <option value="">-No Selection-</option>
      <option value="Late Payment">Late Payment</option>
      <option value="Options Test One">Options Test One</option>
    </select>
  </div>
  <div>
    <label for="reasonTagSelect" class="requiredFieldLabel">Tag</label>
    <select id="reasonTagSelect" name="reasonTagSelect">
      <option value="">-No Selection-</option>
      <option value="tag01">Tag1</option>
      <option value="tag02">Tag2</option>
    </select>
  </div>
</form>
form > div {
  margin-bottom: 1rem;
}
View Compiled
function reasonChanged(event) {
  // on an event e.g. an onchange, an event object is passed to the handler
  // the item that the event occurred on e.g. #reasonSelect, is the event.target
  const input = event.target

  if (input.value === 'Late Payment') {
    $("#reasonTagSelect")
      .val("tag01")
      .trigger("change");
  }
}

// add an onchange listener to #reasonSelect passing in the handler function.
$('#reasonSelect').change(reasonChanged);
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js