javascript - 选择框并获取选项标签

Question

我有一个具有以下结构的下拉框

<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>

句柄函数如下所示 - 我可以使用 e.target.value 获取下拉列表的值 --- 但我需要获取标签 - 所以我需要“Flat”而不是“F”。

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

-- 我尝试使用 e.target.nodeName 获取它

Answer 1

JavaScript:

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

使用 JQuery:

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

使用 React 事件:

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

查看@Dhiraj Bodicherla 的演示:Get selected option text using react js?