Get selected option text using react js?

Question

I have my select list component rendering my select list:

<form className="pure-form">
<select ref="selectMark" className="mark-selector"
 onChange={this.onChange}>{this.getOptions()}
</select>
</form>

I have a method on the component to create the options:

getOptions: function () {
    return this.props.renderProps.data.map(function (item) {
        return <option key={item.value} value={item.value}>{item.label}</option>;
    }.bind(this));

},

My onChange method works fine with the value:

onChange: function(event) {
    var newValue = event.nativeEvent.target.value;
    this.props.renderProps.onSaveCare(newValue);
    this.setState({value: newValue});
    this.toggleEdit();
},

Is there a way I can get the option text? This gives me undefined

event.nativeEvent.target.text; //undefined

Dhiraj · Accepted Answer · 2015-05-18 15:38:09Z

102

Something like this should do

var index = event.nativeEvent.target.selectedIndex;
event.nativeEvent.target[index].text

Here is a demo http://jsbin.com/vumune/4/

answered May 18, 2015 at 15:38

Dhiraj

33.7k10 gold badges65 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

David Lasry Over a year ago

God bless you!!

user10742206 Over a year ago

Hi @Dhiraj, It is working with event.target.value also, so why above?

mufaddal_mw Over a year ago

@user10742206 : incase if something else is assigned to "value" then its useful.

trincot · Accepted Answer · 2015-12-04 16:31:05Z

57

You can get the option text by replacing this:

event.nativeEvent.target.text;

with this:

event.target.options[event.target.selectedIndex].text

edited Dec 4, 2015 at 16:31

trincot

357k38 gold badges282 silver badges338 bronze badges

answered Dec 4, 2015 at 15:28

Sean M

2,06021 silver badges16 bronze badges

Comments

user2091375 · Accepted Answer · 2015-08-18 12:53:21Z

11

If it's single select, here is more simple way:

e.target.selectedOptions[0].text

answered Aug 18, 2015 at 12:53

user2091375

1191 silver badge4 bronze badges

1 Comment

Bcktr Over a year ago

Worked with Vue!

Olbor · Accepted Answer · 2016-09-29 17:07:03Z

10

This worked for me

const {options, value} = e.target;
console.log(options[value].innerHTML);

Edit: I just realized I was using the "value" field to store the ID of some objects, from 0 to n. I guess a better approach could be the following:

const {options, selectedIndex} = e.target;
console.log(options[selectedIndex].innerHTML);

edited Sep 29, 2016 at 17:07

answered Sep 29, 2016 at 13:52

Olbor

1011 silver badge5 bronze badges

Comments

Vinicius Ribeiro · Accepted Answer · 2021-12-13 13:42:19Z

4

It's easy using refs.

import the hook

import React, { useContext, useState, useEffect, useRef } from "react";

instantiate it

const yourNewRef= useRef();

Reference it in your element

ref={yourNewRef}

Then you can access it in any event or function by simply calling:

let textSelectOption = yourNewRef.current.options[yourNewRef.current.selectedIndex].text

You can access the value simply by calling

let optionValue = yourNewRef.current.value

refs are great, you can do almost everything you would using jQuery. Take a look at yourNewRef on console and access all the content via the .current property

answered Dec 13, 2021 at 13:42

Vinicius Ribeiro

1345 bronze badges

Comments

Alexandre Kirszenberg · Accepted Answer · 2015-05-18 15:38:23Z

3

The text of an option is simply the label property of the corresponding item.

In your case, to retrieve the text of the selected option, you can do:

var selectedItem = this.props.renderProps.data.find(function (item) {
  return item.value === event.target.value;
});
selectedItem.label;

Array.prototype.find is part of the ES6 proposal. Underscore or lodash already package it as the _.find method.

answered May 18, 2015 at 15:38

Alexandre Kirszenberg

36.4k10 gold badges93 silver badges72 bronze badges

Comments

Dinesh Katwal · Accepted Answer · 2017-03-24 12:00:35Z

2

Here what i do to retrieve the text from select option in react js.

this.refs.selectMark[this.refs.selectMark.value].text

edited Mar 24, 2017 at 12:00

answered Mar 24, 2017 at 11:26

Dinesh Katwal

9601 gold badge14 silver badges25 bronze badges

Comments

Govani Dhruv Vijaykumar · Accepted Answer · 2020-03-03 09:43:54Z

1

2020 and this Worked For Me

My Select Element :

          <FormGroup>
                  {<Select
                    closeMenuOnSelect={true}
                    components={animatedComponents}
                    options={Options}
                    value = "Ahmedabad"
                    onChange={this.handleChange}
                    name = "citySelect"
                  />}
          </FormGroup>

Call handler :

handleChange = (e) => {
    console.log(e.value)
}

answered Mar 3, 2020 at 9:43

Govani Dhruv Vijaykumar

7657 silver badges11 bronze badges

1 Comment

Juan Over a year ago

butwhat happend if you need the value as a number and get the text inside the option tag?

muhammad osama · Accepted Answer · 2020-05-01 09:28:00Z

1

change your menu item accordingly

Current / Temporary address Permanent address Office / Business Address

and on change event get

onChange = {(e,index)  =>
( setAddressChangeType(e.target.value),  console.log(index.props.id) )
}

answered May 1, 2020 at 9:28

muhammad osama

211 bronze badge

Comments

muhammad osama · Accepted Answer · 2020-05-01 09:35:23Z

1

make your dropdown accordingly and get value on change event like

onChange = {(e,index)  =>
( setAddressChangeType(e.target.value),  console.log(index.props.id) )
}

answered May 1, 2020 at 9:35

muhammad osama

211 bronze badge

Collectives™ on Stack Overflow

Get selected option text using react js?

10 Answers 10

3 Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

10 Answers 10

3 Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related