<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);
This Pen doesn't use any external CSS resources.