34

I have a dropdown: <asp:DropDownList id="dropdownid" runat="server" class=blah"/>

in my jQuery, I assign change event like this:

$('#dropdownid').change(function() {......});

Now, this works when I select different value from the dropdown, however let's say I want to select the same value again. (because I want to make another call with the same value) So, when I select it again, (without changing the value) just by clicking on the selected value from the dropdown and "selecting" it again, no event fires. Is there another event in jquery that I have to assign to it? what's the workaround?

Derek
  • 3,438
  • 1
  • 17
  • 35
ra170
  • 3,643
  • 7
  • 38
  • 52

10 Answers10

28

To expand Vincent Ramdhanie's suggestion, take a look at doing something like this. Essentially, you end up with your own jQuery function that you can re-use elsewhere.

Step 1: Create the jQuery Function

(function($) {
    $.fn.selected = function(fn) {
        return this.each(function() {
            var clicknum = 0;
            $(this).click(function() {
                clicknum++;
                if (clicknum == 2) {
                    clicknum = 0;
                    fn(this);
                }
            });
        });
    }
})(jQuery);

Step 2: Make sure that the newly created jQuery Function's file is referenced for use:

<script src="Scripts/jqDropDown.js" type="text/javascript"></script>

Step 3: Utilize new function:

$('#MyDropDown').selected(function() {
    //Do Whatever...
});

ORIGINAL INFO
With your current code base, selecting the same value from the asp:DropDownList will not fire the change event.

You could try adding another jQuery function for the .blur event. This would fire when the control loses focus:

$('#dropdownid').blur(function() {......});

If they blur function doesn't work for you, I'd add a refresh button or something to that affect that fires the function you are trying to utilize.

Community
  • 1
  • 1
RSolberg
  • 26,821
  • 23
  • 116
  • 160
  • I've actually been trying to solve a similar issue for a while now and your code sample ignited the light bulb... – RSolberg May 22 '09 at 17:28
  • 1
    I've had a very similar idea, but I ran into a problem when you have multiple drop down lists. Let's say you click on a drop down list, if you then from the expanded drop down list, click on another drop down list, the count is then set to 2, but an option now isn't selected, causing wrong targeting. A work around may be to isolate the drop down lists by only allowing this function to work in current scope. – Ben Sewards Sep 20 '12 at 17:42
  • This breaks if you use the keyboard to make selections. – KyleMit Apr 24 '14 at 19:50
  • In addition to the problems Kyle notes, this doesn't work in Chrome on Chrome on Android or Epiphany on Linux; clicks on the drop-down options don't fire the `click` event.. – supervacuo May 19 '15 at 09:33
  • This question was answered nearly 6 years ago... What worked then may very well not today, so edit away! – RSolberg May 21 '15 at 22:06
  • Wow, you guys are geniuses. – Yster Oct 13 '15 at 15:00
  • I've found both to work, however, the one in the answer marked as correct has an odd bug - the event fires an extra time every time the Select option is called. – Omar.Ebrahim Dec 03 '15 at 16:56
16

Try this:

$(document).ready(function(){
 var clicknum = 0;
 $("#dropdownid").click(function(){
    clicknum++;
    if(clicknum == 2){
        alert($(this).val());
        clicknum = 0;
    }
 });
});

First you are creating a variable clicknum to track the number of clicks because you do not want the event to fire every time the user clicks the drop down box. The second click is the selection that the user makes.

If click num happens to be 2 then this is a second click so fire the event and reset clicknum to 0 for the next time. Otherwise do nothing.

Vincent Ramdhanie
  • 102,349
  • 23
  • 137
  • 192
7

Simply wireup click event handlers to the enclosed option controls instead of the select:

$('#dropdownid option').click(function() {......});

This will only fire when you select an option from the dropdown, regardless of whether it changes.

Adam Lassek
  • 35,156
  • 14
  • 91
  • 107
  • Doesn't the .click function fire every time you click the control. So that would be 1 for showing the items, and 2 for selecting? – RSolberg May 22 '09 at 17:25
  • It only fires when you click an option in the list, which is what the OP wants. Expanding the list won't fire the handler, even if you click the box rather than the arrow to do it. – Adam Lassek May 22 '09 at 20:08
  • interesting... Missed the selector with option. Thats pretty cool. – RSolberg May 22 '09 at 20:44
  • 1
    @AdamLassek: Interesting! This doesn't work on Chrome on Linux. However, works on Chrome/Windows. But does work on Firefox/Linux. I tested all with the same version of JQuery. Any clue? – Ethan Aug 22 '12 at 20:08
  • Most browsers will not fire [events on the `option` element](http://webbugtrack.blogspot.ca/2007/11/bug-280-lack-of-events-for-options.html) – KyleMit Apr 25 '14 at 15:30
3

A lot of the current solutions will break in a lot of situations. Any solution that relies on checking the click count twice will be very fickle.

Some scenarios to consider:

  • If you click on, then off, then back on, it will count both clicks and fire.
  • In firefox, you can open the menu with a single mouse click and drag to the chosen option without ever lifting up your mouse.
  • If you use any combination of keyboard strokes you are likely to get the click counter out of sync or miss the change event altogether.
    • You can open the dropdown with Alt+ (or the Spacebar in Chrome and Opera).
    • When the dropdown has focus, any of the arrow keys will change the selection
    • When the dropdown menu is open, clicking Tab or Enter will make a selection

Here's a more comprehensive extension:

The most robust way to see if an option was selected is to use the change event, which you can handle with jQuery's .change() handler.

The only remaining thing to do is determine if the original element was selected again.
This has been asked a lot (one, two, three) without a great answer in any situation.

The simplest thing to do would be to check to see if there was a click or keyup event on the option:selected element BUT Chrome, IE, and safari don't seem to support events on option elements, even though they are in the w3c recommendation

Inside the Select element seems to be a black box. If you listen to events on it, you can't even tell on which element the event occurred or whether the list was open or not.

The next best thing then, seems to handle the blur event. This will indicate that the user has focused on the dropdown (perhaps seen the list, perhaps not) and made a decision that they would like to stick with the original value. To continue handling changes right away we'll still subscribe to the change event. And to ensure we don't double count, we'll set a flag if the change event was raised so we don't fire back twice:

Code:

(function ($) {
    $.fn.selected = function (fn) {
        return this.each(function () {
            $(this).focus(function () {
                this.dataChanged = false;
            }).change(function () {
                this.dataChanged = true;
                fn(this);
            }).blur(function (e) {
                if (!this.dataChanged) {
                    fn(this);
                }
            });
        });
    };
})(jQuery);

Then call like this:

$("#dropdownid").selected(function (e) {
    alert('You selected ' + $(e).val());
});

Updated example in jsFiddle

Community
  • 1
  • 1
KyleMit
  • 30,350
  • 66
  • 462
  • 664
3

According to the API:

The change event fires when a control loses the input focus and its value has been modified since gaining focus.

You might want to try the mousedown or click events as an alternative.

ern
  • 1,522
  • 13
  • 19
2

Check out this solution:
http://ledomoon.blogspot.com/2009/12/dropdown-selected-change-event-by.html

$(document).ready(function () {
    // select all the divs and make it invisible
    $("div.Content").css("display", "none");
    // Find all the combos inside the table or gridview
    $("#tblItems").find("select.Status").each(function () {
        // Attached function to the change event of each combo
        $(this).change(function () {
            if ($(this).val() == "test1") {
                // Change the visibility of the next div after the selected combo if the selected value = test1
                $(this).parent().find("div.Content").fadeIn("slow"); //css("display","block");
            } else {
                $(this).parent().find("div.Content").fadeOut("slow"); //.css("display","none");
            }
        });
    });
});

Hope this helps

KyleMit
  • 30,350
  • 66
  • 462
  • 664
0

For me the following solution worked fine:

$("#dropdownid select").click(function() {
  alert($("#dropdownid select option:selected").html());
});
ScholChr
  • 9
  • 1
  • 1
  • Most browsers will not fire [events on the `option` element](http://webbugtrack.blogspot.ca/2007/11/bug-280-lack-of-events-for-options.html) – KyleMit Apr 25 '14 at 15:28
0

This issue you are having is due to the client's handling of the base select HTML. Since most clients aren't going to flag a non change, you are going to have to try something different.

I would probably add a "refresh" button or something like that but I am a developer and not a designer so I am probably wrong. :)

Craig
  • 11,614
  • 13
  • 44
  • 62
0

The selected item of a drop down is there to reflect a choice already made.

My suggestion is to reset the dropdown to a default value like "Select...", every time a required action is completed. So, if the user need to perform Action A twice, the dropdown would reset after each action.

  1. User selects Action A from the dropdown.
  2. Action A is performed and dropdown is reset.
  3. User selects Action A from the dropdown.
  4. Action A is performed and dropdown is reset.

Hope this helps,

Rich

kim3er
  • 6,306
  • 4
  • 41
  • 69
-1

Also:

$('#dropdownid select option').click(function() {
   ....
}
Nathan
  • 57
  • 4
  • Most browsers will not fire [events on the `option` element](http://webbugtrack.blogspot.ca/2007/11/bug-280-lack-of-events-for-options.html) – KyleMit Apr 25 '14 at 15:27