选择框并获取选项标签

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?