jQuery: Get the text and value of the selected option of HTML select element

by Yang Yang on April 16, 2009

Share This Article:
Subscribe to Kavoir: blog feed

For instance, there’s a HTML select element identified by the ID #title, and after the user has selected one of the options, you want to get the text and value of the selected option.

<select id="title">
  <option value="1">Mr</option>
  <option value="2">Mrs</option>
  <option value="3">Miss</option>
</select>

Now that the user has selected the 2nd option: Mrs. To get the value (in this case, ‘2’):

$("select#title").val();

Which is also the common function to return the value of all other form controls.

To get the text of the selected option (in this case, ‘Mrs’):

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

Share This Article:
Subscribe to Kavoir: blog feed

You should also read:

{ 5 comments… read them below or add one }

ERiK April 15, 2010 at 2:45 am

if i use jquery : get the text and value of selected option will it pass it on to an email if i have 3/4 email addresses for my options and send a comment etc to that selected address?

Reply

Yang Yang April 19, 2010 at 4:06 pm

I can’t suggest a solution to this but you need a lot more to do that.

Reply

PedroO November 10, 2010 at 8:15 am

Can i use jQuery to check the value of a and if is chosen to show a new ?

User Scenario:
User chooses country; then then creates a new drop down box which will enable user to choose city.

Thanks in advance!
PedroO

Reply

Bill February 16, 2011 at 10:46 pm

Greetings!
I have a select inside a table cell. I need to get the value of the selected item into a PHP variable.

I have an Update button that initiates a database update of the values but it is not getting the selected value into the request array. I can use the $(“#title option:selected”).text(); stated above but I need to hook it to the Update button and then into a var to be passed to the next form.

Can you help me? Thanks in advance.

Reply

charles1812 May 4, 2011 at 10:53 am

Leave a Comment

{ 1 trackback }

Previous post:

Next post: