How to get selected text from a drop-down list using jQuery?
We can select text or we can also find the position of a text in a drop down list using option:selected attribute or by using val() method in jQuery.
By using val() method :
The val() method is an inbuilt method in jQuery which is used to return or set the value of attributes for the selected elements.
Syntax :
$(selector).val(parameter)
Parameter : parameter is optional.
Example :
< html > < head > < title >jQuery Selector</ title > < script src = </ script > < script > $(document).ready(function() { $("#submit").click(function() { alert($("#myselection").val()); }); }); </ script > < style > div { width: 50%; height: 200px; padding: 10px; border: 2px solid green; } </ style > </ head > < body > < div > < p >The selected value:</ p > < select id = "myselection" > < option value = "1" >First</ option > < option value = "2" >Second</ option > </ select > < br > < br > < button id = "submit" >Submit</ button > </ div > </ body > </ html > |
Output :
Before click on the button.
After click on the button.
By using option:selected :
The option:selected method is a way in jQuery which is used to return the selected element from a list of the element.
Syntax :
$("#selector option:selected");
Parameter : No parameter required.
Example :
< html > < head > < title >jQuery Selector</ title > < script src = </ script > < script > $(document).ready(function() { $("#submit").click(function() { var value = $("#myselection option:selected"); alert(value.text()); }); }); </ script > < style > div { width: 50%; height: 200px; padding: 10px; border: 2px solid green; } </ style > </ head > < body > < div > < p >The selected value:</ p > < select id = "myselection" > < option value = "1" >First</ option > < option value = "2" >Second</ option > </ select > < br > < br > < button id = "submit" >Submit</ button > </ div > </ body > </ html > |
Output :
Before click on the button.
After click on the button.
jQuery is an open source JavaScript library that simplifies the interactions between an HTML/CSS document, It is widely famous with it’s philosophy of “Write less, do more”.
You can learn jQuery from the ground up by following this jQuery Tutorial and jQuery Examples.