jQuery event on select elements when an option is selected (NOT .change)

Question

Looking for an easy event to bind to that will fire any time an option is selected, even when it is the currently selected option. jQuery's .change() does not seem to fire when selecting the selected option again, but only the others (which makes sense, because it is a "change" event after all).

Is there anything else out there that is more or less identical to how change works, but will also fire when the selected element is selected again? Or will I need to get sloppy with click events or something?

why do you want to trigger something when the value does not change? perhaps there is a better approach — Huangism, Feb 06 '14 at 20:40
I never understood why someone would need to know if they picked the same value. Look at blur — epascarello, Feb 06 '14 at 20:41
Basically, this field is disabled because of sensitive data. When you enable it, you gain access to view its contents and write out access logs. When a value is selected, it becomes disabled and hidden again, and if necessary, writes out change logs. To remain consistent with change() for the other options, I want the event to fire when selecting the same option as well. Does that make sense? — Charlie Mulic, Feb 06 '14 at 20:45
I think Irfan's answer is the closest you can get (gets my vote) -- only doesn't work in Chrome and Safari. Otherwise, you could handle all cases on `blur` (per isherwood) in all browsers, but that's probably not the interaction-model you want. — Faust, Feb 06 '14 at 21:05
To those who wonder why you would want to do this, another example is if the selection takes you to another page, and the user presses the back button, that selection will be the selected default. Clicking on it again does nothing. — RationalRabbit, Oct 09 '21 at 23:05

score 2 · Accepted Answer · answered Feb 06 '14 at 20:45

2

<select id="select">
    <option value="1">1</option>
    <option value="2">2</option>
</select>

JS

 $(function(){
        $('#select option').click(function(){
        alert($(this).val());
        });
    })

answered Feb 06 '14 at 20:45

Irfan TahirKheli

3,652
1
22
36

2

There is no click event on the option tag: http://stackoverflow.com/a/3487274/613004 – Faust Feb 06 '14 at 20:48
2

not for me -- what browser are you using? I'm using the latest Chrome. – Faust Feb 06 '14 at 20:52
2

Interesting. Works in FF and IE, but not Chrome. Haven't tried the others. Presuming won't work in Safari. Maybe Opera? – Faust Feb 06 '14 at 20:53
i am using firefox,Opera and IE 11 – Irfan TahirKheli Feb 06 '14 at 20:55
Yep -- doesn't work in Safari. So it's a Webkit issue. – Faust Feb 06 '14 at 20:57

Erik · Answer 2 · 2017-11-09T21:59:24.133

While Irfan's solution seems like a viable one, it did not work for me in Chrome. However, I ended up using a sort of workaround to solve this problem where I set a placeholder type option when the click event fires on the select box.

<select id="dropdown">
    <option value="choose" disabled selected>Choose</option>
    <option value="1">1</option>
    <option value="2">2</option>
</select>
<script>
// When the dropdown is opened, the "choose" option is selected
    $('#dropdown').on('click', function(){
        $("#dropdown option").filter(function() {
          return $(this).val() == "choose"; 
        }).prop('selected', true);

        // On change will always fire
        $('#dropdown').on('change', doStuff);
    });

    function doStuff(){
        // Grab the selected value before click changes it
        let currentValue = $('#dropdown').val();

        alert(currentValue);

        /* Do other stuff with currentValue

           Wait until second click that selects sets value to "choose"
           when the user makes their selection, then set the selector
           back to what the user chose
        */
        setTimeout(function(){
            $("#dropdown option").filter(function() {
              return $(this).val() == order; 
            }).prop('selected', true);
        }, 100);
    }
</script>

The result is a slight delay before the selector shows what the user chose, but the change event always fires, since the active value was changed. This doesn't work as well in IE or FireFox, but if you can detect the browser being used, and combine this with Ifran's solution, you should be able to have this working on all browsers.

score 0 · Answer 3 · answered Jan 20 '21 at 14:37

This is how I just solved a similar problem. Needed to display other fields when certain option was chosen. put the onclick on the select and passed the value of the option. Then just target the specific option you want in the function.

<select onclick='myfunc($(this).val())'>
        <option value="" selected disabled hidden>pick</option>
        <option value="a">a</option>
        <option value="b">b</option>
    </select>

Jquery

 function myfunc(val){
            if(val == 'a'){
                $("#a").show();
                $("#b").hide();
            }
            if(val=='b'){
                $("#a").hide();
                $("#b").show();
            }
        }

jQuery event on select elements when an option is selected (NOT .change)

3 Answers3