Fire event each time a DropDownList item is selected with jQuery

Question

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?

Answer 1

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.

Answer 2

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. :)

Answer 3

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.

Answer 4

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

Answer 5

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

Answer 6

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.

Answer 7

please check 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,

Answer 8

For me the following solution worked fine:

$("#dropdownid select").click(function() {
  alert($("#dropdownid select option:selected").html());
});