Bomber Bomber - 2 months ago 20
Javascript Question

Get selected option text using react js?

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

Answer

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/

Comments