Question

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();