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?

<

Answer 1

$('#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 2

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 3

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 4

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 5

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 6

Try this code.

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

Try Here!