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

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.

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

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.

• javascript
• jquery
• drop-down-menu

• 4 You can't, as selecting the same value isn't a change, it's the same. Maybe you could just listen for any click on the element, and that's about as close as you'll get without hacking away at the default browser behaviour. – adeneo Commented Jun 26, 2013 at 17:50
• Maybe try listening for a click on option? – ayyp Commented Jun 26, 2013 at 17:52
• @AndrewPeacock - option elements don't fire mouse events in all browsers. – adeneo Commented Jun 26, 2013 at 17:53
• 4 Here's the answers to your question: stackoverflow./a/898761/1648170 stackoverflow./questions/11002421/… – cbelizon Commented Jun 26, 2013 at 18:07
• 1 Why run the function again when the value did not change? there is probably a better approach to this – Huangism Commented Jan 16, 2014 at 18:36

7 Answers 7

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/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/filever10/TyGPU/

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

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

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 mon, what kind of elements are they?)

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

});

Try this code.

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

Try Here!

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


});