Geek asks and answers

JQuery event when a user makes a selection in a dropdown menu

I have a drop down list. In jQuery, what event will I use when the user makes a choice.

Dropdown ID - drp1

I tried the following but did not work:

$("#ddrp1").SelectChanged(SelectionItem);
+3
source share
3 answers

Use the event change():

$("#ddrp1").change(function() {
    // Pure JS
    var selectedVal = this.value;
    var selectedText = this.options[this.selectedIndex].text;

    // jQuery
    var selectedVal = $(this).find(':selected').val();
    var selectedText = $(this).find(':selected').text();
});

In jQuery 1.7 you can use .on()

$("#ddrp1").on("change", function() {
    // Pure JS
    var selectedVal = this.value;
    var selectedText = this.options[this.selectedIndex].text;

    // jQuery
    var selectedVal = $(this).find(':selected').val();
    var selectedText = $(this).find(':selected').text();
}​​​​);​

Here's a working jsFiddle usingon()

+12
source

What you want is an event onchangethat can be written as

 $("#ddrp1").change (function () { 
 });
+1
source

Use jQuery event handler change.

$("#ddrp1").change(function(){
    //selection changed
    alert(this.value);//this will give the selected option value
    alert($(this).find(':selected').text());//this will give the selected option text
});

An alternative way to bind an event handler change.

$("#ddrp1").bind('change', function(){

});
+1
source

More articles:


All Articles