WEB TUTORIALS
PRACTICE EXAMPLES
HTML REFERENCES
CSS REFERENCES
PHP REFERENCES

How to Get the Value of Selected Option in a Select Box Using jQuery

Topic: JavaScript / jQueryPrev|Next

Answer: Use the jQuery :selected Selector

You can use the jQuery :selected selector in combination with the val() method to find the selected option value in a select box or dropdown list. Here's an example:

  • <!DOCTYPE html>
  • <html lang="en">
  • <head>
  • <meta charset="UTF-8">
  • <title>jQuery Get Selected Option Value</title>
  • <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
  • <script type="text/javascript">
  • $(document).ready(function(){
  •     $("select.country").change(function(){
  •         var selectedCountry = $(this).children("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, as shown in the following example:

  • <!DOCTYPE html>
  • <html lang="en">
  • <head>
  • <meta charset="UTF-8">
  • <title>jQuery Get Selected Option Text</title>
  • <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
  • <script type="text/javascript">
  • $(document).ready(function(){
  •     $("select.country").change(function(){
  •         var selectedCountry = $(this).children("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

Similarly, you can retrieve the selected values from multiple select boxes with a little trick.

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. Here's an example:

  • <!DOCTYPE html>
  • <html lang="en">
  • <head>
  • <meta charset="utf-8">
  • <title>jQuery Get Multiple Selected Option Value</title>
  • <script src="https://code.jquery.com/jquery-1.12.4.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:

Your Feedback:

We would love to hear from you, please drop us a line.