Categories
html-select javascript

Get selected value in dropdown list using JavaScript

2214

How do I get the selected value from a dropdown list using JavaScript?

<form>
  <select id="ddlViewBy">
    <option value="1">test1</option>
    <option value="2" selected="selected">test2</option>
    <option value="3">test3</option>
  </select>
</form>

0

    3501

    Given a select element that looks like this:

    <select id="ddlViewBy">
      <option value="1">test1</option>
      <option value="2" selected="selected">test2</option>
      <option value="3">test3</option>
    </select>
    

    Running this code:

    var e = document.getElementById("ddlViewBy");
    var value = e.value;
    var text = e.options[e.selectedIndex].text;
    

    Results in:

    value == 2
    text == "test2"
    

    Interactive example:

    var e = document.getElementById("ddlViewBy");
    function onChange() {
      var value = e.value;
      var text = e.options[e.selectedIndex].text;
      console.log(value, text);
    }
    e.onchange = onChange;
    onChange();
    <form>
      <select id="ddlViewBy">
        <option value="1">test1</option>
        <option value="2" selected="selected">test2</option>
        <option value="3">test3</option>
      </select>
    </form>

    12

    • 166

      var strUser = e.options[e.selectedIndex].value; why not just var strUser = e.value ?

      Dec 31, 2014 at 0:01

    • 25

      @TheRedPea—perhaps because when this answer was written there was a chance (however remote) that an ancient version of Netscape Navigator needed to be accommodated, so an equally ancient method for accessing the value of a single select was used. But I’m just guessing about that. 😉

      – RobG

      Jan 18, 2015 at 4:06

    • 15

      I used like this: var e = document.getElementById("ddlViewBy").value;

      – Fthr

      Oct 25, 2016 at 16:16


    • 5

      should be e.target.options[e.target.selectedIndex].text don’t know why it’s wrong in all answers here..

      – OZZIE

      Jan 2, 2019 at 11:10

    • 3

      @OZZIE – Look at the assignment statement beginning with var e in the OP’s question. While it’s convention for e (or event) to represent the eventObject, here the OP is using it to represent the element.

      Jan 28, 2020 at 14:24

    445

    Plain JavaScript:

    var e = document.getElementById("elementId");
    var value = e.options[e.selectedIndex].value;
    var text = e.options[e.selectedIndex].text;
    

    jQuery:

    $("#elementId :selected").text(); // The text content of the selected option
    $("#elementId").val(); // The value of the selected option
    

    AngularJS: (http://jsfiddle.net/qk5wwyct):

    // HTML
    <select ng-model="selectItem" ng-options="item as item.text for item in items">
    </select>
    <p>Text: {{selectItem.text}}</p>
    <p>Value: {{selectItem.value}}</p>
    
    // JavaScript
    $scope.items = [{
      value: 'item_1_id',
      text: 'Item 1'
    }, {
      value: 'item_2_id',
      text: 'Item 2'
    }];
    

    6

    • 2

      I must be doing something wrong because when I try this I get back the text of every option in the drop down.

      – Kevin

      Jun 6, 2013 at 21:18

    • 6

      This did worked for me in different way. $(“#ddlViewBy :selected”).val() not without selected

      – Ruwantha

      Aug 14, 2013 at 8:07

    • 1

      element.options[e.selectedIndex].value must be element.options[element.selectedIndex].value

      Mar 27, 2015 at 15:18

    • Still useful – thank you for writing out the variations / language! Now if I only knew the equivalent for Office JS API Dropdown…

      Mar 1, 2018 at 18:21

    • 1

      It also worked for me in jQuery by simply putting $("#elementId").val() with no need to mention the selected

      – Elias

      Mar 16, 2021 at 23:29


    192

    var strUser = e.options[e.selectedIndex].value;
    

    This is correct and should give you the value.
    Is it the text you’re after?

    var strUser = e.options[e.selectedIndex].text;
    

    So you’re clear on the terminology:

    <select>
        <option value="hello">Hello World</option>
    </select>
    

    This option has:

    • Index = 0
    • Value = hello
    • Text = Hello World

    3

    • 1

      i thought the “.value” in javascript should returns the value for me but only the “.text” would returns as what the .SelectedValue in asp.net returns. Thanks for example given!

      – Fire Hand

      Jul 6, 2009 at 7:56

    • 1

      Yep – make the value of the option the same as what it is. Simpler – the guy above needs to write more code to make up for his initial vagueness.

      Aug 27, 2013 at 15:00

    • should be e.target.options[e.target.selectedIndex].text don’t know why it’s wrong in all answers here..

      – OZZIE

      Jan 2, 2019 at 11:10