JQuery detect dropdown value is selected even if i

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

Try this code.

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

Try Here!

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

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 4

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 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

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


});