Get selected value in dropdown list using JavaScript

Question

How do I get the selected value from a dropdown list using JavaScript  I tried the methods below  but they all return the selected index instead of the value   x000D   x000D  var as   document form1 ddlViewBy value  var e   document getElementById  ddlViewBy    var strUser   e options e selectedIndex  value  x000D   x000D   x000D

User · Answer

Make a drop-down menu with several options (As many as you want!)

<select>
  <option value="giveItAName">Give it a name
  <option value="bananaShark">Ridiculous animal
  <ooption value="Unknown">Give more options!
</select>

I made a bit hilarious. Here's the code snippet:

_x000D_

<select>_x000D_
  <option value="RidiculousObject">Banana Shark_x000D_
  <option value="SuperDuperCoding">select tag and option tag!_x000D_
  <option value="Unknown">Add more tags to add more options!_x000D_
</select>_x000D_
<h1>Only 1 option (Useless)</h1>_x000D_
<select>_x000D_
  <option value="Single">Single Option_x000D_
</select>

_x000D_

yay the snippet worked

User · Answer

I think you can attach an event listener to the select tag itself e g   lt script gt    document addEventListener  quot DOMContentLoaded quot         gt        document querySelector  quot select quot   addEventListener  quot change quot    e    gt          console log e target value                  lt  script gt   In this scenario  you should make sure you have a value attribute for all of your options  and they are not null

User · Answer

var selectedValue   document getElementById  ddlViewBy   value

User · Answer

Just use       SelectBoxId option selected   text    for getting the text as listed     SelectBoxId   val    for getting the selected index value

User · Answer

You should be using querySelector to achieve this  This also standardize the way of getting value from form elements   var dropDownValue   document querySelector   ddlViewBy   value   Fiddle  https   jsfiddle net 3t80pubr

User · Answer

lt select id  Ultra  onchange  alert this value   gt     lt option value  0  gt Select lt  option gt    lt option value  8  gt text1 lt  option gt    lt option value  5  gt text2 lt  option gt    lt option value  4  gt text3 lt  option gt   lt  select gt    Any input form field can use a    this    keyword when you are  accessing it from inside the element  This eliminates the need for locating a form in the dom tree and then locating this element inside the form

User · Answer

If you have a select element that looks like this   lt select id  quot ddlViewBy quot  gt     lt option value  quot 1 quot  gt test1 lt  option gt     lt option value  quot 2 quot  selected  quot selected quot  gt test2 lt  option gt     lt option value  quot 3 quot  gt test3 lt  option gt   lt  select gt   Running this code  var e   document getElementById  quot ddlViewBy quot    var strUser   e value   Would make strUser be 2  If what you actually want is test2  then do this  var e   document getElementById  quot ddlViewBy quot    var strUser   e options e selectedIndex  text   Which would make strUser be test2

User · Answer

You can use querySelector   E g   var myElement   document getElementById  ddlViewBy     var myValue   myElement querySelector   selected    value

User · Answer

In 2015  in Firefox  the following also works      e options selectedIndex

User · Answer

I don t know if I m the one that doesn t get the question right  but this just worked for me  Using an onchange   event in your html  eg    lt select id  numberToSelect  onchange  selectNum  gt       lt option value  1  gt One lt  option gt       lt option value  2  gt Two lt  option gt       lt option value  3  gt Three lt  option gt   lt  select gt      javascript  function sele        var strUser   numberToSelect value      This will give you whatever value is on the select dropdown per click

User · Answer

There are two ways to get this done either using JavaScript or jQuery   JavaScript   var getValue   document getElementById  ddlViewBy   selectedOptions 0  value   alert  getValue      This will output the value selected    OR  var ddlViewBy   document getElementById  ddlViewBy     var value   ddlViewBy options ddlViewBy selectedIndex  value   var text   ddlViewBy options ddlViewBy selectedIndex  text   alert  value      This will output the value selected  alert  text      This will output the text of the value selected   jQuery       ddlViewBy selected   text       Text of the selected value      ddlViewBy   val       Outputs the value of the ID in  ddlViewBy

User · Answer

To go along with the previous answers  this is how I do it as a one-liner  This is for getting the actual text of the selected option  There are good examples for getting the index number already   And for the text  I just wanted to show this way   let selText   document getElementById  elementId   options document getElementById  elementId   selectedIndex  text   In some rare instances you may need to use parentheses  but this would be very rare   let selText    document getElementById  elementId    options  document getElementById  elementId    selectedIndex  text    I doubt this processes any faster than the two line version  I simply like to consolidate my code as much as possible   Unfortunately this still fetches the element twice  which is not ideal  A method that only grabs the element once would be more useful  but I have not figured that out yet  in regards to doing this with one line of code

User · Answer

The simplest way to do this is   var value   document getElementById  selectId   value

User · Answer

Here is a JavaScript code line   var x   document form1 list value    Assuming that the dropdown menu named list name  list  and included in a form with name attribute name  form1

User · Answer

Beginners are likely to want to access values from a select with the NAME attribute rather than ID attribute  We know all form elements need names  even before they get ids  So  I m adding the getElementsByName   solution just for new developers to see too  NB  names for form elements will need to be unique for your form to be usable once posted  but the DOM can allow a name be shared by more than one element  For that reason consider adding IDs to forms if you can  or be explicit with form element names my nth select named x and my nth text input named y  Example using getElementsByName  var e   document getElementsByName  quot my select with name ddlViewBy quot   0   var strUser   e options e selectedIndex  value

User · Answer

In more modern browsers  querySelector allows us to retrieve the selected option in one statement  using the  checked pseudo-class  From the selected option  we can gather whatever information we need    x000D   x000D  const opt   document querySelector   ddlViewBy option checked    x000D     opt is now the selected option  so x000D  console log opt value   is the selected value    x000D  console log opt text   is the selected option s text    x000D   lt select id  ddlViewBy  gt  x000D     lt option value  1  gt test1 lt  option gt  x000D     lt option value  2  selected  selected  gt test2 lt  option gt  x000D     lt option value  3  gt test3 lt  option gt  x000D   lt  select gt  x000D   x000D   x000D

User · Answer

Another solution is   document getElementById  elementId   selectedOptions 0  value

User · Answer

Just do  document getElementById  idselect   options selectedIndex  Then you i ll get select index value  starting in 0

User · Answer

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    lt select gt       lt option value  hello  gt Hello World lt  option gt   lt  select gt    This option has    Index   0 Value   hello Text   Hello World

User · Answer

I have a bit different view of how to achieve this  I m usually doing this with the following approach  it is an easier way and works with every browser as far as I know     lt select onChange  functionToCall this value    id  ddlViewBy  gt     lt option value  value1  gt Text one lt  option gt     lt option value  value2  gt Text two lt  option gt     lt option value  value3  gt Text three lt  option gt     lt option value  valueN  gt Text N lt  option gt   lt  select gt

User · Answer

The previous answers still leave room for improvement because of the possibilities  the intuitiveness of the code  and the use of id versus name  One can get a read-out of three data of a selected option -- its index number  its value and its text  This simple  cross-browser code does all three    lt  DOCTYPE html gt   lt html gt   lt head gt       lt meta charset  utf-8  gt       lt title gt Demo GetSelectOptionData lt  title gt   lt  head gt   lt body gt       lt form name  demoForm  gt           lt select name  demoSelect  onchange  showData    gt               lt option value  zilch  gt Select  lt  option gt               lt option value  A  gt Option 1 lt  option gt               lt option value  B  gt Option 2 lt  option gt               lt option value  C  gt Option 3 lt  option gt           lt  select gt       lt  form gt        lt p id  firstP  gt  amp nbsp  lt  p gt       lt p id  secondP  gt  amp nbsp  lt  p gt       lt p id  thirdP  gt  amp nbsp  lt  p gt        lt script gt      function showData             var theSelect   demoForm demoSelect          var firstP   document getElementById  firstP            var secondP   document getElementById  secondP            var thirdP   document getElementById  thirdP            firstP innerHTML     This option  s index number is      theSelect selectedIndex      Javascript index numbers start at 0             secondP innerHTML     Its value is      theSelect theSelect selectedIndex  value           thirdP innerHTML     Its text is      theSelect theSelect selectedIndex  text               lt  script gt   lt  body gt   lt  html gt    Live demo  http   jsbin com jiwena 1 edit html output    id should be used for make-up purposes  For functional form purposes  name is still valid  also in HTML5  and should still be used  Lastly  mind the use of square versus round brackets in certain places  As was explained before  only  older versions of  Internet nbsp Explorer will accept round ones in all places

User · Answer

Here s an easy way to do it in an onchange function   event target options event target selectedIndex  dataset name

User · Answer

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  selected   val       The value of the selected option   AngularJS   http   jsfiddle net qk5wwyct       HTML  lt select ng-model  selectItem  ng-options  item as item text for item in items  gt   lt  select gt   lt p gt Text    selectItem text   lt  p gt   lt p gt Value    selectItem value   lt  p gt      JavaScript  scope items        value   item 1 id     text   Item 1         value   item 2 id     text   Item 2

User · Answer

If you ever run across code written purely for Internet nbsp Explorer you might see this   var e   document getElementById  ddlViewBy    var strUser   e options e selectedIndex  value    Running the above in Firefox et al will give you an  is not a function  error  because Internet nbsp Explorer  allows you to get away with using    instead of      var e   document getElementById  ddlViewBy    var strUser   e options e selectedIndex  value    The correct way is to use square brackets

User · Answer

The following code exhibits various examples related to getting putting of values from input select fields using JavaScript   Source Link  Working Javascript  amp  jQuery Demo        lt select id  Ultra  onchange  run    gt    lt  --Call run   function-- gt        lt option value  0  gt Select lt  option gt        lt option value  8  gt text1 lt  option gt        lt option value  5  gt text2 lt  option gt        lt option value  4  gt text3 lt  option gt   lt  select gt  lt br gt  lt br gt  TextBox1 lt br gt   lt input type  text  id  srt  placeholder  get value on option select  gt  lt br gt  TextBox2 lt br gt   lt input type  text  id  rtt   placeholder  Write Something    onkeyup  up    gt    The following script is getting the value of the selected option and putting it in text box 1   lt script gt      function run             document getElementById  srt   value   document getElementById  Ultra   value         lt  script gt    The following script is getting a value from a text box 2 and alerting with its value   lt script gt      function up               if  document getElementById  srt   value                      var dop   document getElementById  srt   value                      alert dop          lt  script gt    The following script is calling a function from a function   lt script gt      function up             var dop   document getElementById  srt   value          pop dop      Calling function pop            function pop val            alert val           lt  script gt

User · Answer

Using jQuery      select   val

User · Answer

Running example of how it works    x000D   x000D  var e   document getElementById  ddlViewBy    x000D  var val1   e options e selectedIndex  value  x000D  var txt   e options e selectedIndex  text  x000D   x000D  document write   lt br   gt Selected option Value     val1   x000D  document write   lt br   gt Selected option Text     txt   x000D   lt select id  ddlViewBy  gt  x000D     lt option value  1  gt test1 lt  option gt  x000D     lt option value  2  gt test2 lt  option gt  x000D     lt option value  3   selected  selected  gt test3 lt  option gt  x000D   lt  select gt  x000D   x000D   x000D    Note  The values don t change as the dropdown is changed  if you require that functionality then an onClick change is to be implemented

User · Answer

Try  ddlViewBy value                         value  ddlViewBy selectedOptions 0  text       label    x000D   x000D  console log  ddlViewBy value    x000D   x000D  console log  ddlViewBy selectedOptions 0  text    x000D   lt select id  ddlViewBy  gt  x000D     lt option value  1  gt Happy lt  option gt  x000D     lt option value  2  gt Tree lt  option gt  x000D     lt option value  3   selected  selected  gt Friends lt  option gt  x000D   lt  select gt  x000D   x000D   x000D

[javascript] Get selected value in dropdown list using JavaScript

Examples related to javascript

Examples related to html-select