CODEWITHSUNDEEP
javascriptjqueryhtml
Charlie Mulic
Charlie Mulic

Reputation: 199

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

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?

Upvotes: 3

Views: 7264

Answers (3)

Alooishus
Alooishus

Reputation: 16

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();
            }
        }

Upvotes: 0

Erik
Erik

Reputation: 108

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.

Upvotes: 0

Irfan TahirKheli
Irfan TahirKheli

Reputation: 3662

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

JS

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

Upvotes: 2

Related Questions