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.
