CODEWITHSUNDEEP
javascriptreactjs
The Old County
The Old County

Reputation: 89

Select box and getting the option label

I have a dropdown box with the following structure

<select 
     name="propertytype"
     value={this.state.propertytype}
     onChange={this.handlePropertyTypeChange}>
     <option value="">Property Type</option>
     <option value="T">Terrace</option>
     <option value="F">Flat</option>
     <option value="S">Semi</option>
     <option value="D">Detached</option>
</select>

the handle function looks like this - I can obtain the value of the dropdown with e.target.value --- but I need to obtain the label - so instead of "F" I need "Flat".

handlePropertyTypeChange: function(e) {
    this.setState({propertytype: e.target.value});
}

-- I have tried obtaining it using e.target.nodeName

Upvotes: 2

Views: 2556

Answers (1)

BrTkCa
BrTkCa

Reputation: 4783

JavaScript:

var el = document.getElementByName('prototypetype');
var text = el.options[el.selectedIndex].innerHTML;

With JQuery:

$('select option:selected').text();

With React event:

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

See the demo from @Dhiraj Bodicherla: Get selected option text using react js?

Upvotes: 4

Related Questions