jQuery select change event when selecting the same value

Question

How can I handle the collapse event of a select, or trigger the change event even if the selected option did not change ?

I need to have this for a search engine, where the mascot will still move if the option that was selected is the same. The search engine is on this page : http://www.marocpneus.com

For example, if you go ahead and click on the first select "Type de véhicule" and choose "Tourisme" which was already selected, the character will not move to the second select. However if you do change "Tourisme" to one of the other values, the character will indeed move using the classic jQuery change event.

I don't believe that there is a 'collapse' (or equivalent) event. But I'd love to be proven wrong. — David Thomas, Mar 16 '13 at 17:08
The change event is only triggered if the value changes, you'd probably have to trigger a custom event or use the click event on the options etc. — adeneo, Mar 16 '13 at 17:09
@adeneo the click on the options won't work for me. I'm using this code to test it but it won't trigger : $('select option').click(function(){console.log("CLICKED")}); Can you provide an example please ? — Yassir Ennazk, Mar 16 '13 at 17:25

score 13 · Answer 1 · edited May 23 '17 at 11:55

Ok, after some research, it looks like select option clik cannot been fired due to browsers incomptability (look this SO question: Event attached to Option node not being fired)

... but we can simulate the click, to make a workaround, XD, you have the fiddle here: http://jsfiddle.net/H9gg5/3

Js

$('select.click_option').click(function() {
    if ( $(this).data('clicks') == 1 ) {
        // Trigger here your function:    
        console.log('Selected Option: ' + $(this).val() );
        $(this).data('clicks', 0);
    } else {
        console.log('first click');
        $(this).data('clicks', 1);
    }
});

$('select.click_option').focusout( function() {
    $(this).data('clicks', 0);
});

Html

<select class="click_option">
      <option value="1"> Selected 1 </option>
      <option value="2"> Selected 2 </option>
</select>

What does it do? Well, we know we have selected an option (even the same option) because we click twice over the select, so, just count the number of clicks, and when it comes after a previous click, trigger it, XD. The code also handles the lose of focus, because if you click out of the select, it will close with clicks = 1 and you have to reset it.

I've added a class to the select, for triggering only the function when the user clicks the select that you want.

Hope it helps, regards!

jQuery select change event when selecting the same value

1 Answers1

Linked