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);
Add a comment
|
4 Answers
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()
3 Comments
Nate Pet
how do I get the text. Value in my case returns 5. Thakns
pbarney
This works every time the option is changed. If someone uses the keyboard to move down a list in a dropdown, it will fire every single time. I need it to only fire once when the user has actually selected an option. Is there a way to detect if an option is actually selected when the user clicks on an option, hits enter on an option or tabs away after moving onto an option?
James Hill
@pbarney when a select has focus and allows users to use the keyboard to switch between options, the selected option IS changing. There's no way around this functionality. There is no concept of "selecting" an option when using the keyboard, unless the user 1) first clicks on the dropdown to open it and then uses the keyboard to select & presses enter, or 2) when the select has focus they press the space bar to open it, then use the keyboard to select the desired option and press enter. The issue you're describing is simply select input focus + keyboard. That will always fire the change event.
What you want is onchange event which can be written as
$("#ddrp1").change (function () {
});
answered Apr 27, 2012 at 15:09
Selvakumar Arumugam
79.9k15 gold badges123 silver badges139 bronze badges
Comments
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(){
});
2 Comments
Nate Pet
How do you get the text, value returns 5 in my case.
ShankarSangoli
To get the text of the selected option use
$(this).find(':selected').text() where this is the dropdown element.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 ...
});
