Get selected option text with JavaScript

Question

I have a dropdown list like this    lt select id  box1  gt   lt option value  98  gt dog lt  option gt   lt option value  7122  gt cat lt  option gt   lt option value  142  gt bird lt  option gt   lt  select gt    How can I get the actual option text rather than the value using JavaScript   I can get the value with something like    lt select id  box1  onChange  myNewFunction this selectedIndex     gt    But rather than 7122 I want cat

User · Answer

Plain JavaScript  var sel   document getElementById  box1    var text  sel options sel selectedIndex  text    jQuery       box1 option selected   text

User · Answer

lt select class  cS  onChange  fSel2 this value    gt        lt option value  0  gt S lectionner lt  option gt        lt option value  1  gt Un lt  option gt        lt option value  2  selected gt Deux lt  option gt        lt option value  3  gt Trois lt  option gt    lt  select gt     lt select id  iS1  onChange  fSel options this selectedIndex  value    gt        lt option value  0  gt S lectionner lt  option gt        lt option value  1  gt Un lt  option gt        lt option value  2  selected gt Deux lt  option gt        lt option value  3  gt Trois lt  option gt    lt  select gt  lt br gt     lt select id  iS2  onChange  fSel3 options this selectedIndex  text    gt        lt option value  0  gt S lectionner lt  option gt        lt option value  1  gt Un lt  option gt        lt option value  2  selected gt Deux lt  option gt        lt option value  3  gt Trois lt  option gt    lt  select gt     lt select id  iS3  onChange  fSel3 options this selectedIndex  textContent    gt        lt option value  0  gt S lectionner lt  option gt        lt option value  1  gt Un lt  option gt        lt option value  2  selected gt Deux lt  option gt        lt option value  3  gt Trois lt  option gt    lt  select gt     lt select id  iS4  onChange  fSel3 options this selectedIndex  label    gt        lt option value  0  gt S lectionner lt  option gt        lt option value  1  gt Un lt  option gt        lt option value  2  selected gt Deux lt  option gt        lt option value  3  gt Trois lt  option gt    lt  select gt     lt select id  iS4  onChange  fSel3 options this selectedIndex  innerHTML    gt        lt option value  0  gt S lectionner lt  option gt        lt option value  1  gt Un lt  option gt        lt option value  2  selected gt Deux lt  option gt        lt option value  3  gt Trois lt  option gt    lt  select gt     lt script type  text javascript  gt   use strict      const s document querySelector   cS         options this selectedIndex  value  let fSel    sIdx    gt  console log sIdx       s options sIdx  text  s options sIdx  textContent  s options sIdx  label     let fSel2   sIdx    gt       this value      console log sIdx  s options sIdx  text           s options sIdx  textContent  s options sIdx  label           options this selectedIndex  text     options this selectedIndex  textContent     options this selectedIndex  label     options this selectedIndex  innerHTML  let fSel3   sIdx    gt         console log sIdx        lt  script gt     fSel   But      lt script type  text javascript  gt   use strict       const x document querySelector   cS              o x options  i x selectedIndex      console log o i  value                  o i  text   o i  textContent   o i  label   o i  innerHTML     lt  script gt      cS    And also this      lt select id  iSel  size  3  gt        lt option value  one  gt Un lt  option gt        lt option value  two  gt Deux lt  option gt        lt option value  three  gt Trois lt  option gt    lt  select gt      lt script type  text javascript  gt   use strict       const i document getElementById  iSel        for let k 0 k lt i length k              if k    i selectedIndex  console log  Selected   repeat 3            console log    Object entries i options  k  1  value                            gt                             Object entries i options  k  1  innerHTML             console log Object values i options  k  value                           gt                         Object values i options  k  innerHTML           console log     repeat 25            lt  script gt

User · Answer

You ll need to get the innerHTML of the option  and not its value    Use this innerHTML instead of this selectedIndex    Edit  You ll need to get the option element first and then use innerHTML    Use this text instead of this selectedIndex

User · Answer

Try options   x000D   x000D  function myNewFunction sel    x000D    alert sel options sel selectedIndex  text   x000D    x000D   lt select id  box1  onChange  myNewFunction this    gt  x000D     lt option value  98  gt dog lt  option gt  x000D     lt option value  7122  gt cat lt  option gt  x000D     lt option value  142  gt bird lt  option gt  x000D   lt  select gt  x000D   x000D   x000D

User · Answer

HTML    lt select id  box1  onChange  myNewFunction this    gt    JavaScript   function myNewFunction element        var text   element options element selectedIndex  text                 DEMO  http   jsfiddle net 6dkun 1

User · Answer

React   Latest JavaScript onChange     e   gt  e currentTarget option e selectedIndex  text    will give you exact value if values are inside a loop

User · Answer

Use -    trim    select   children  option selected   text        cat   Here is the fiddle - http   jsfiddle net eEGr3

User · Answer

I just copy all amazon com  quot select list quot   you can see demo from following image gif link   I love amazon com  quot select option quot  css style and javascript tricks    try it now      x000D   x000D      javascript code       document querySelector   mySelect   addEventListener  click        gt        var x   document querySelector   mySelect   selectedIndex      let optionText   document getElementsByTagName  option   x  innerText      document querySelector   nav-search-label   innerText   optionText        x000D      style css        nav-left       display  -webkit-box      display  -moz-box      display  -webkit-flex      display  -ms-flexbox      display  flex      position  static      float  none         nav-search-scope       display  -webkit-box      display  -moz-box      display  -webkit-flex      display  -ms-flexbox      display  flex      position  relative      float  none      top  0      right  0      bottom  0      left  0         nav-search-facade       position  relative      float  left      cursor  default      overflow  hidden      top  3px         nav-search-label       display  block      overflow  hidden      white-space  nowrap      text-overflow  ellipsis      color   555      font-size  12px      line-height  33px      margin-right  21px      margin-left  5px      min-width  19px         nav-icon       position  absolute      top  14px      right  8px      border-style  solid       border-style  dashed      border-width  4px      border-color  transparent      border-top  4px solid  666      border-bottom-width  0      width  0      height  0      font-size  0      line-height  0         nav-search-dropdown       position  absolute      display  block      top  -1px      left  0      height  35px      width  auto      font-family  inherit      outline  0      margin  0      padding  0      cursor  pointer      opacity  0      filter  alpha opacity 0       visibility  visible      border  0      line-height  35px      x000D   lt  --html code-- gt   lt div class  nav-left  gt     lt div id  nav-search-dropdown-card  gt       lt div class  nav-search-scope nav-sprite  gt         lt div class  nav-search-facade  gt           lt span class  nav-search-label  style  width  auto  gt All lt  span gt           lt i class  nav-icon  gt  lt  i gt         lt  div gt          lt select         id  mySelect          class  nav-search-dropdown searchSelect          style  display  block  top  3px          tabindex  0          title  Search in         gt           lt option gt All Departments lt  option gt           lt option gt Arts  amp amp  Crafts lt  option gt           lt option gt Automotive lt  option gt           lt option gt Baby lt  option gt           lt option gt Beauty  amp amp  Personal Care lt  option gt           lt option gt Books lt  option gt           lt option gt Computers lt  option gt           lt option gt Digital Music lt  option gt           lt option gt Electronics lt  option gt           lt option gt Kindle Store lt  option gt           lt option gt Prime Video lt  option gt           lt option gt Women s Fashion lt  option gt           lt option gt Men s Fashion lt  option gt           lt option gt Girls  Fashion lt  option gt           lt option gt Boys  Fashion lt  option gt           lt option gt Deals lt  option gt           lt option gt Health  amp amp  Household lt  option gt           lt option gt Home  amp amp  Kitchen lt  option gt           lt option gt Industrial  amp amp  Scientific lt  option gt           lt option gt Luggage lt  option gt           lt option gt Movies  amp amp  TV lt  option gt           lt option gt Music  CDs  amp amp  Vinyl lt  option gt           lt option gt Pet Supplies lt  option gt           lt option gt Software lt  option gt           lt option gt Sports  amp amp  Outdoors lt  option gt           lt option gt Tools  amp amp  Home Improvement lt  option gt           lt option gt Toys  amp amp  Games lt  option gt           lt option gt Video Games lt  option gt         lt  select gt       lt  div gt     lt  div gt   lt  div gt  x000D   x000D   x000D

User · Answer

There are two solutions  as far as I know      both that just need using vanilla javascript   1 selectedOptions     live demo    x000D   x000D  const log   console log  x000D  const areaSelect   document querySelector   id  area      x000D   x000D  areaSelect addEventListener  change    e    gt    x000D       log  e target   e target   x000D    const select   e target  x000D    const value   select value  x000D    const desc   select selectedOptions 0  text  x000D    log  option desc   desc   x000D      x000D   lt div class  select-box clearfix  gt  x000D     lt label for  area  gt Area lt  label gt  x000D     lt select id  area  gt  x000D       lt option value  101  gt A1 lt  option gt  x000D       lt option value  102  gt B2 lt  option gt  x000D       lt option value  103  gt C3 lt  option gt  x000D     lt  select gt  x000D   lt  div gt  x000D   x000D   x000D    2 options     live demo    x000D   x000D  const log   console log  x000D  const areaSelect   document querySelector   id  area      x000D   x000D  areaSelect addEventListener  change    e    gt    x000D       log  e target   e target   x000D    const select   e target  x000D    const value   select value  x000D    const desc   select options select selectedIndex  text  x000D    log  option desc   desc   x000D      x000D   lt div class  select-box clearfix  gt  x000D     lt label for  area  gt Area lt  label gt  x000D     lt select id  area  gt  x000D       lt option value  101  gt A1 lt  option gt  x000D       lt option value  102  gt B2 lt  option gt  x000D       lt option value  103  gt C3 lt  option gt  x000D     lt  select gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Try the below   myNewFunction   function id  index        var selection   document getElementById id       alert selection options index  innerHTML        See here jsfiddle sample

User · Answer

All these functions and random things  I think it is best to use this  and do it like this   this options this selectedIndex  text

[javascript] Get selected option text with JavaScript

Examples related to javascript

Examples related to html

Examples related to dom

Examples related to drop-down-menu