Jquery event when user makes selection in dropdown

Question

I have a drop down list. In Jquery what is the event I would use when the user makes a selection.

The id of the dropdown is drp1

I tried the following but did not work:

$("#ddrp1").SelectChanged(SelectionItem);

James Hill · Accepted Answer · 2012-04-27T15:27:23.513

Use the change() event:

$("#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 using on()

how do I get the text. Value in my case returns 5. Thakns – Nate Pet Apr 27 '12 at 15:22 — Nate Pet, Apr 27 '12 at 15:22

score 3 · Answer 2 · answered Apr 27 '12 at 15:09

3

What you want is onchange event which can be written as

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

answered Apr 27 '12 at 15:09

Selvakumar Arumugam

78,145
14
119
133

ShankarSangoli · Answer 3 · 2012-04-27T15:24:44.053

2

Use jQuery change event handler.

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

Alternative way to bind change event handler is.

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

});

edited Apr 27 '12 at 15:24

answered Apr 27 '12 at 15:09

ShankarSangoli

68,720
11
89
123

How do you get the text, value returns 5 in my case. – Nate Pet Apr 27 '12 at 15:21
1

To get the text of the selected option use `$(this).find(':selected').text()` where this is the dropdown element. – ShankarSangoli Apr 27 '12 at 15:24
Thanks @ShankarSangoli – Mazhar MIK Mar 13 '19 at 13:08

score 0 · Answer 4 · answered Feb 05 '20 at 02:48

You need to use change().

jQuery change event occurs when the value of an element is changed.

This event is limited to input elements, textarea boxes and select elements.

$("#ddrp1").change (function () { 

     var getText = $(this).find(':selected').text();
     alert (getText); // show the text value of the selected element ...

 });

Jquery event when user makes selection in dropdown

4 Answers4

Linked