JQuery detect dropdown value is selected even if it's not changed

Question

Using JQuery or JavaScript, I want to detect when a user selects a value, even if they don't change the already selected value.

How can this be accomplished?

I tried -

$('#MyID').select(function(){ /*my function*/ });

and

$('#MyID').change(function(){ /*my function*/ }); //nothing changing, so this fails

But they do not work.

Example - I have a dropdown with a list of years in it with nothing selected, the user selects "1976", I run a function. With "1976" selected, the user clicks on the dropdown again and selects "1976" again, I want to run the function again.

Answer 1

all systems go (on second click at least...)

Set a switch to run on selection, and reset the switch after it's captured and/or on blur.

var go = false;//switch off
$('#MyID').on('click',function() {//on click
    if (go) {//if go
        //do stuff here with $(this).val()
        go = false;//switch off
    } else { go = true; }//if !go, switch on
}).on('blur', function() { go = false; });//switch off on blur

made a fiddle: http://jsfiddle.net/filever10/2XBVf/

edit: for keyboard support as well, something like this should work.

var go = false;//switch off
$('#MyID').on('focus active click',function() {//on focus/active
    doit($(this));//do it
}).on('change', function() {
    go=true;//go
    doit($(this));//and doit
}).on('blur', function() { go = false; });//switch off on blur

function doit(el) {
    if (go) {//if go
        //do stuff here with el.val()
        go = false;//switch off
    } else {go=true}//else go
}

made a fiddle: http://jsfiddle.net/filever10/TyGPU/

Answer 2

Have you tried .blur()?

$('#MyID').blur(function(){
    //my function
});

Please note that you will have to click somewhere outside the dropdown menu on the page before the function will trigger. I don't know if this can be passed.

JsFiddle here

Answer 3

Try this...

To get selected option's value...

$("body").click(function(event) {
    if(event.target.nodeName== "SELECT"){
                 selectedValue = event.target.value;
            }   
});

and then get the text from the value

var text = $("option").filter(function() {
      return $(this).attr("value") === selectedValue;
    }).first().text();

Answer 4

Have you tried something like:

$('#MyID li').click(function(){ //my function });

Here you are detecting clicks on the list elements inside your dropdown, which should be the different options. (If your HTML is slightly different, just inspect it and see what all the options have in common, what kind of elements are they?)

Answer 5

$('#MyID option').hover(function(){
   //user is on an option, but not selected it yet
},function(){
   //user left an option without selecting
}).click(function(){
   //user clicked on an option, selecting it

});

Answer 6

Try this code.

$("#MyID").click(function (){
    alert($("#MyID").val());
});

Try Here!

Answer 7

I've made a working jsfiddle only tested on firefox. I've managed to do what you want by adding a dummy option to the selectbox. This dummy option has a display:none style and won't be visible in the option list.

DEMO

<select id="myselect">
    <option value="1">one</option>
    <option value="2">two</option>
    <option value="3" selected="selected">three</option>
    <option value="4">four</option>
    <option class="dummy" style="display:none">dummy</option>
</select>



$('#myselect').on('focus',function(){    
    $(this).find("option.dummy").prop("selected", true);
});

$('#myselect').on('change',function(){
    var select=$(this);
    var text=select.find("option:selected").text();

    $('.dummy').attr('value',select.val()).text(text);
    alert(select.val());


});