Retrieving the text of the selected option in select element

Question

In the following     lt select id  test  gt       lt option value  1  gt Test One lt  option gt       lt option value  2  gt Test Two lt  option gt   lt  select gt    How can I get the text of the selected option  i e   Test One  or  Test Two   using JavaScript  document getElementsById  test   selectedValue returns 1 or 2  what property returns the text of the selected option

User · Answer

selectElement options selectElement selectedIndex  text    References    options collection  selectedIndex property  HTML DOM Select Object text property  HTML DOM Option Object exactly the answer of this question  Option text Property

User · Answer

If you use jQuery then you can write the following code       selectId option selected   html

User · Answer

You can use selectedIndex to retrieve the current selected option   el   document getElementById  elemId   selectedText   el options el selectedIndex  text

User · Answer

this options this selectedIndex  innerText

User · Answer

Use the select list object  to identify its own selected options index  From there - grab the inner HTML of that index  And now you have the text string of that option    lt select onchange  alert this options this selectedIndex  innerHTML    gt          lt option value    gt Select Actions lt  option gt          lt option value  1  gt Print PDF lt  option gt          lt option value  2  gt Send Message lt  option gt          lt option value  3  gt Request Review lt  option gt          lt option value  4  gt Other Possible Actions lt  option gt       lt  select gt

User · Answer

Under HTML5 you are be able to do this   document getElementById  test   selectedOptions 0  text   MDN s documentation at https   developer mozilla org en-US docs Web API HTMLSelectElement selectedOptions indicates full cross-browser support  as of at least December 2017   including Chrome  Firefox  Edge and mobile browsers  but excluding Internet Explorer

User · Answer

Easy  simple way   const select   document getElementById  selectID    const selectedOption       select options  find option   gt  option selected  text

User · Answer

document getElementById  test   options document getElementById  test   selectedIndex  text

User · Answer

If you found this thread and wanted to know how to get the selected option text via event here is sample code   alert event target options event target selectedIndex  text

User · Answer

Similar to  artur just without jQuery  with plain javascript      Using  Sean-bright s  elt  variable  var selection elt options elt selectedIndex  innerHTML

User · Answer

The options property contains all the  lt options gt  - from there you can look at  text  document getElementById  test   options 0  text     Text One

User · Answer

function getSelectedText elementId        var elt   document getElementById elementId        if  elt selectedIndex    -1          return null       return elt options elt selectedIndex  text     var text   getSelectedText  test

[javascript] Retrieving the text of the selected <option> in <select> element

Examples related to javascript

Examples related to html

Examples related to dom