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

by Yang Yang on April 16, 2009

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>

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


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

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?

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.

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!

Bill February 16, 2011 at 10:46 pm

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.

charles1812 May 4, 2011 at 10:53 am
Nur December 7, 2012 at 5:43 pm


Thanks. This helps me a lot.

Leandro February 19, 2013 at 2:11 am


Mark_F May 23, 2013 at 1:19 am

Hey Yang,
good information. I read your post occasionally. Can you answer this:
How do I assign values from my Array to variables that I can use.
I have this:
function AddData() {
var myList = $(“li”);
locationDB = myList.children();
locationDB.each(function (item, element) {
if (locationDB.length == 0) {
// loop through found locations returned from the database
for (var i = 0; i < locationDB.length; i++) {

var healthCenterName = $('#element[id="healthCenters_hlCenterName"]').attr("innerHTML");
var typeofCenter = $('#element[id="healthCenters_lblTypeofCenter"]').attr("innerHTML");
var address = $('#element[value="healthCenters_lblAddress"]').attr("innerHTML");
var city = $('#element[value="healthCenters_lblCity"]').attr("innerHTML");
var state = $('#element[value="healthCenters_lblState"]').attr("innerHTML");
var zipCode = $('#element[value="healthCenters_lblZipCode"]').attr("innerHTML");
var phone = $('#element[value="healthCenters_lblPhoneNumber"]').attr("innerHTML");
var url = $('#element[value="healthCenters_webSite"]').attr("innerHTML");
var services = $('#element[value="healthCenters_lblPatientServices"]').attr("innerHTML");
var distance = $('#element[value="healthCenters_lblRadius"]').attr("innerHTML");
var locationid = $('#element[value="healthCenters_lblLocationID"]').attr("innerHTML");
var location = new Microsoft.Maps.Location(parseFloat($('#element[value="healthCenters_lblLat"]').attr("innerHTML")), parseFloat($('#element[value="healthCenters_lblLng"]').attr("innerHTML")));
var description = address + '’ + city + ” + state + ” + phone + ” + url + ” + distance;

var locationAry = [];

// push location to array for use in map viewing

Comments on this entry are closed.

{ 1 trackback }

Previous post:

Next post: