My current situation involves a select box with predetermined options. One of these options is preselected when the page loads:
<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>
When the select element's value changes, I need to trigger some JavaScript code. To achieve this using jQuery, I include the following code:
$(".js-choice-select").on("change", function() {
var selectedValue = $(this).val();
doSomething(selectedValue);
});
ISSUE
The problem arises when a user opens the select box but does not choose any option other than the already selected one, causing the default 'change' event listener not to trigger. However, I still need my doSomething function to execute in such cases.
Could someone suggest a practical and direct solution for this scenario?