Event listener for select elements that has not changed values

Question

My situation is as follows:

I have got a select box with a few options. One of those options can be preselected on pageload by the back end:

<select name="select" class="js-choice-select">
    <option value="option-1">Option 1</option>
    <option value="option-2" selected="selected">Option 2</option>
    <option value="option-3">Option 3</option>
    <option value="option-4">Option 4</option>
    <option value="option-5">Option 5</option>
</select>

Whenever this select element changes value, some JS code needs to be triggered. So, in this case with jQuery I add the following code:

$(".js-choice-select").on("change", function() {

    var selectedValue = $(this).val();

    doSomething(selectedValue);

});

PROBLEM

Now when the user opened the select box, but doesn't select any other value than the already selected option, the default 'change' event listener will not trigger, but my doSomething function needs to be fired.

Does anyone know a feasible and straight-forward solution for this?

Answer 1

You could trigger the same piece of code on click , focus and/or blur events. This way doSomething() will be triggered whenever you need it to.