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

9 Comments / JavaScript Tips & Tutorials, jQuery Tips & FAQ / By /

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

Related Posts

9 thoughts on “jQuery: Get the text and value of the selected option of HTML select element”

  1. ERiK

    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?

  3. PedroO

    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

  4. Bill

    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.

  5. Pingback: Alternative Listbox UI « Avventure sul Web

  9. Mark_F

    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) {
    clearMap();
    return;
    }
    // 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
    locationAry.push(location);

Comments are closed.

Scroll to Top