Menu
Question
[Question]

Get text and value of selected drop-down list option using jQuery  

I have the following select element:

<select id="countries">
  <option value="AR">Argentina</option>
  <option value="AU">Australia</option>
  <option value="AT">Austria</option>
  <option value="AF">Afghanistan</option>
</select>

When the user selects a particular country from the drop-down list, how can I get the name of that country and its value using jQuery?

For instance, if she selects Australia, I need both "AU" and "Australia"?
2 Answers

To get the text of the selected item, you can use either of these options:

$("#countries option:selected").text();
$("#countries :selected").text();

To get the value of the selected item, use:

$("#countries").val()

To get the text, a few other options are also there:

$("#countries").children(":selected").text();    //This is the fastest

$("#countries").find(":selected").text();

asked Oct 01, 2016
viewed 717 times
active Oct 01, 2016
Looking for a job?
Groundswell Cloud Solutions
Vancouver, Canada

Startup (stealth)
London, UK

Microsoft
Seattle

JP/Morgan Chase
Dallas, Texas


Related
• How to add a new column, with a default value, to an existing table in SQL Server
• How to get the name of an element with jQuery
• How to get the name of an element with jQuery
• What is better: place the using directives inside a namespace or outside?
• ASP.NET Core: setting Viewbag value in the OnActionExecuting method
• ASP.NET Core: setting Viewbag value in the OnActionExecuting method
• Difference between jQuery and Angular
• Difference between jQuery and Angular
• Difference between jQuery and Angular
• Difference between jQuery and Angular