JSFiddle - React, Tailwind, and code Playground

HTML

<select id="notDisplayedSelect">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
</select>
<span id="output">I show selected value</span>
<button id="setValue">Select third option in the hidden select</button>

CSS

#notDisplayedSelect {
    display:none;
}

JavaScript

// This doesn't work
document.getElementById("notDisplayedSelect").addEventListener("change", function (e) {
    $("#output").text("When select is hidden events still fire: new value = "+ $( this ).val());
});

/*
// This works
$("#notDisplayedSelect").change(function (e) {
    $("#output").text("When select is hidden events still fire: new value = "+ $( this ).val());
}); 
*/

$("#setValue").click(function () {
    $("#notDisplayedSelect").val("3");
    // Create the event
var event = new CustomEvent("change");

// Dispatch/Trigger/Fire the event
document.getElementById("notDisplayedSelect").dispatchEvent(event);
});