我有一个这样的下拉列表:
<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。
当前回答
所有这些函数和随机的东西，我认为最好使用这个，像这样做:
this.options[this.selectedIndex].text
其他回答
使用- - - - - -
$.trim($("select").children("option:selected").text()) //cat
这里是小提琴- http://jsfiddle.net/eEGr3/
您需要获取该选项的innerHTML，而不是它的值。
用这个。innerHTML代替this.selectedIndex。
编辑:首先需要获取option元素，然后使用innerHTML。
用这个。text代替this.selectedIndex。
在React中使用Typescript:
const handleSelectChange: React.ChangeEventHandler<HTMLSelectElement> = (event) => {
const { options, selectedIndex } = event.target;
const text = options[selectedIndex].text;
// Do something...
};
据我所知，有两种解决办法。
两者都只需要使用普通的javascript
1 selectedOptions
现场演示
const log = console.log; const areaSelect = document.querySelector(`[id="area"]`); areaSelect.addEventListener(`change`, (e) => { // log(`e.target`, e.target); const select = e.target; const value = select.value; const desc = select.selectedOptions[0].text; log(`option desc`, desc); }); <div class="select-box clearfix"> <label for="area">Area</label> <select id="area"> <option value="101">A1</option> <option value="102">B2</option> <option value="103">C3</option> </select> </div>
两个选择
现场演示
const log = console.log; const areaSelect = document.querySelector(`[id="area"]`); areaSelect.addEventListener(`change`, (e) => { // log(`e.target`, e.target); const select = e.target; const value = select.value; const desc = select.options[select.selectedIndex].text; log(`option desc`, desc); }); <div class="select-box clearfix"> <label for="area">Area</label> <select id="area"> <option value="101">A1</option> <option value="102">B2</option> <option value="103">C3</option> </select> </div>
函数runCode() { var value = document.querySelector('#Country').value; window.alert(文档。querySelector(#国家选项(value = $ {value}]) .innerText); ｝ <select name="Country" id="Country"> 印度<选项值= " " > < /选项> <option value="GBR">United Kingdom </option> . " /option> . <option value="USA">美国</option> <option value="URY">乌拉圭</option> . <option value="UZB">乌兹别克斯坦</option> < /选择> <按钮onclick = " runCode ()按钮“> < / >
