我有一个这样的下拉列表:
<select id="box1">
<option value="98">dog</option>
<option value="7122">cat</option>
<option value="142">bird</option>
</select>
我如何才能获得实际的选项文本，而不是使用JavaScript的值?我可以通过如下方式获取值:
<select id="box1" onChange="myNewFunction(this.selectedIndex);" >
但我想要猫而不是7122。
当前回答
在React中使用Typescript:
const handleSelectChange: React.ChangeEventHandler<HTMLSelectElement> = (event) => {
const { options, selectedIndex } = event.target;
const text = options[selectedIndex].text;
// Do something...
};
其他回答
您需要获取该选项的innerHTML，而不是它的值。
用这个。innerHTML代替this.selectedIndex。
编辑:首先需要获取option元素，然后使用innerHTML。
用这个。text代替this.selectedIndex。
试试下面的方法:
myNewFunction = function(id, index) {
var selection = document.getElementById(id);
alert(selection.options[index].innerHTML);
};
请看这里的jsfiddle示例
试着选择
myNewFunction(sel) { alert (sel.options [sel.selectedIndex]。text); ｝ <select id="box1" onChange="myNewFunction(this);" > 狗<选项值= " 98 " > < /选项> 猫<选项值= " 7122 " > < /选项> 鸟<选项值= " 142 " > < /选项> < /选择>
使用- - - - - -
$.trim($("select").children("option:selected").text()) //cat
这里是小提琴- http://jsfiddle.net/eEGr3/
HTML:
<select id="box1" onChange="myNewFunction(this);">
JavaScript:
function myNewFunction(element) {
var text = element.options[element.selectedIndex].text;
// ...
}
演示:http://jsfiddle.net/6dkun/1/
