How to get selected option text with JavaScript?

Sometimes, we want to get selected option text with JavaScript.

In this article, we’ll look at how to get selected option text with JavaScript.

To get selected option text with JavaScript, we can use the text property of the selected option element.

For instance, we write

const onChange = (e) => {
  console.log(e.target.options[e.target.selectedIndex].text);
};

document.getElementById("box1").onchange = onChange;

to create the onChange function that gets the selected option with

e.target.options[e.target.selectedIndex]

And then we get the text of the selected option with text.

Then we set document.getElementById("box1").onchange to onChange to use that as the listener that runs when we change options.

Then we add the drop down with

<select id="box1">
  <option value="98">dog</option>
  <option value="7122">cat</option>
  <option value="142">bird</option>
</select>

To get selected option text with JavaScript, we can use the text property of the selected option element.