close

How to get selected value of a dropdown menu in ReactJS

Hello Guys, How are you all? Hope You all Are Fine. Today we are going to learn How to get selected value of a dropdown menu in ReactJS in javascript. So Here I am Explain to you all the possible methods here.

Without wasting your time, Let’s start This Article.

How to get selected value of a dropdown menu in ReactJS ?

  1. How to get selected value of a dropdown menu in ReactJS ?

    get selected value of a dropdown menu in ReactJS Just use onChange event of the <select> object. Selected value is in e.target.value then.
    By the way, it's a bad practice to use id="...". It's better to use ref=">.."

  2. get selected value of a dropdown menu in ReactJS

    get selected value of a dropdown menu in ReactJS Just use onChange event of the <select> object. Selected value is in e.target.value then.
    By the way, it's a bad practice to use id="...". It's better to use ref=">.."

Method 1

Implement your Dropdown as

<select id = "dropdown" ref = {(input)=> this.menu = input}>
    <option value="N/A">N/A</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
</select>

Now, to obtain the selected option value of the dropdown menu just use:

let res = this.menu.value;

Method 2

Just use onChange event of the <select> object. Selected value is in e.target.value then.

By the way, it’s a bad practice to use id="...". It’s better to use ref=">.."

Summery

It’s all About this article. Hope all method helped you a lot. Comment below Your thoughts and your queries. Also, Comment below which method worked for you? Thank You.

Leave a Comment