3

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?

Kees van Lierop
  • 973
  • 6
  • 20
  • 1
    You can perform the desired operation on default value using `.trigger('change')` – Satpal Jan 13 '17 at 10:10
  • The doSomething function does not need to be triggered on pageload, but on the moment when the select box has been used (whether it has changed or not). – Kees van Lierop Jan 13 '17 at 10:12
  • Tricky, have a look at this fiddle, might be helpful: http://jsfiddle.net/4959gLxq/ – axel.michel Jan 13 '17 at 10:58
  • Thanks for the fiddle, but it behaves like the default `blur` event, calling the YAY! function only after focusing on a new element. (both mobile and desktop) – Kees van Lierop Jan 13 '17 at 11:02
  • @KeesvanLierop there is no direct event to trigger the "close" of a select element, you might simply count (first one open, next must be close), but you would miss if the user directly clicks outside the element, or is using a tab? What do you want to trigger before "blur" - every other user-action is a blur for this field. – axel.michel Jan 13 '17 at 11:12
  • @axel.michel The blur event doesn't get called when you close the select box, so nothing happens.. until you tap another random element which is not that particular select element. What I want is that on close it already fires. – Kees van Lierop Jan 13 '17 at 11:16
  • @KeesvanLierop There are change, click, focus and blur, there are no other events to trigger the state of a select field. You can't use change, you don't want to use focus or blur, leaves click, which is fired only one time (in case the user opens the field), so what is it that it can't wait until blur? – axel.michel Jan 13 '17 at 11:34

1 Answers1

0

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.

Luuuud
  • 4,206
  • 2
  • 25
  • 34
  • This would trigger the function already when the user taps on the select box right? I prefer executing the function after the user closes the select box (for instance on native mobile selects) – Kees van Lierop Jan 13 '17 at 10:14
  • @KeesvanLierop in that case you could just use the `blur` event. I'm not 100% sure all browsers will blur the ` – Luuuud Jan 13 '17 at 10:17
  • Just tested this with the `blur` event, but nothing happens when I close the select box, until I focus another element, then the event gets fired. – Kees van Lierop Jan 13 '17 at 10:19
  • 1
    Just read up on the issue (here)[http://stackoverflow.com/questions/11877527/html-select-trigger-javascript-onchange-event-even-when-the-option-is-not-chan]. Recommended solution is automatically setting the value to something bogus on select, so that the value _always_ changes. – Luuuud Jan 13 '17 at 10:29