How to get the value of selected option in a select box using jQuery

Topic: JavaScript / jQuery« Prev|Next »

Answer: Use the jQuery :selected selector with val() method

The jQuery :selected selector can be used in conjugation with the val() method to find the selected option value in a select box or dropdown list.

  • <!DOCTYPE html>
  • <html lang="en">
  • <head>
  • <meta charset="UTF-8">
  • <title>jQuery Get Selected Option Value</title>
  • <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
  • <script type="text/javascript">
  • $(document).ready(function(){
  •     $("select.country").change(function(){
  •         var selectedCountry = $(".country option:selected").val();
  •         alert("You have selected the country - " + selectedCountry);
  •     });
  • });
  • </script>
  • </head> 
  • <body>
  •     <form>
  •         <label>Select Country:</label>
  •         <select class="country">
  •             <option value="usa">United States</option>
  •             <option value="india">India</option>
  •             <option value="uk">United Kingdom</option>
  •         </select>
  •     </form>
  • </body>
  • </html>

If the value for an option is not defined specifically, the text content of the <option> element will be used as a value instead. Here's an example.

  • <!DOCTYPE html>
  • <html lang="en">
  • <head>
  • <meta charset="UTF-8">
  • <title>jQuery Get Selected Option Text</title>
  • <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
  • <script type="text/javascript">
  • $(document).ready(function(){
  •     $("select.country").change(function(){
  •         var selectedCountry = $(".country option:selected").val();
  •         alert("You have selected the country - " + selectedCountry);
  •     });
  • });
  • </script>
  • </head> 
  • <body>
  •     <form>
  •         <label>Select Country:</label>
  •         <select class="country">
  •             <option>United States</option>
  •             <option>India</option>
  •             <option>United Kingdom</option>
  •         </select>
  •     </form>
  • </body>
  • </html>

Alternativley you can use the jQuery text() method to get the text content of an element.


Get Selected Options from Multiple Select Box

A multiple select box allows a user to select multiple options. Hold down the control key on Windows or command key on Mac to select multiple options. You can enable multiple section in a select box by adding the attribute multiple to the <select> tag.

  • <!DOCTYPE html>
  • <html lang="en">
  • <head>
  • <meta charset="utf-8">
  • <title>jQuery Get Multiple Selected Option Value</title>
  • <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
  • <script type="text/javascript">
  • $(document).ready(function() {
  •     $("button").click(function(){
  •         var countries = [];
  •         $.each($(".country option:selected"), function(){            
  •             countries.push($(this).val());
  •         });
  •         alert("You have selected the country - " + countries.join(", "));
  •     });
  • });
  • </script>
  • </head>
  • <body>
  •     <form>
  •         <label>Country:</label>
  •         <select class="country" multiple="multiple" size="5">
  •             <option>United States</option>
  •             <option>India</option>
  •             <option>United Kingdom</option>
  •             <option>Brazil</option>
  •             <option>Germany</option>
  •         </select>
  •         <button type="button">Get Values</button>
  •     </form>
  • </body>
  • </html>

Related FAQ

Here are some more FAQ related to this topic:

 
Close

Your Feedback:

 

We would love to hear from you! Please say something.