The Old County The Old County - 2 months ago 6
Javascript Question

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

Answer

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?