我有一个这样的下拉列表:
<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。
当前回答
使用普通JavaScript
onChange = { e => e.currentTarget.options[e.selectedIndex].text }
如果值在循环中，会给你精确的值。
其他回答
您需要获取该选项的innerHTML，而不是它的值。
用这个。innerHTML代替this.selectedIndex。
编辑:首先需要获取option元素，然后使用innerHTML。
用这个。text代替this.selectedIndex。
纯JavaScript
var sel = document.getElementById("box1");
var text= sel.options[sel.selectedIndex].text;
jQuery:
$("#box1 option:selected").text();
在React中使用Typescript:
const handleSelectChange: React.ChangeEventHandler<HTMLSelectElement> = (event) => {
const { options, selectedIndex } = event.target;
const text = options[selectedIndex].text;
// Do something...
};
ECMAScript 6 +。
const select = document.querySelector("#box1");
const { text } = [...select.options].find((option) => option.selected);
使用普通JavaScript
onChange = { e => e.currentTarget.options[e.selectedIndex].text }
如果值在循环中，会给你精确的值。
