使用JavaScript获取选定的选项文本
我有这样的下拉列表:
<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
我想要cat
。
尝试选项
<script> function myNewFunction(sel) { alert(sel.options[sel.selectedIndex].text); } </script> <select id="box1" onChange="myNewFunction(this);" > <option value="98">dog</option> <option value="7122">cat</option> <option value="142">bird</option> </select>
普通的JavaScript
var sel = document.getElementById("box1"); var text= sel.options[sel.selectedIndex].text;
jQuery的:
$("#box1 option:selected").text();
HTML:
<select id="box1" onChange="myNewFunction(this);">
JavaScript的:
function myNewFunction(element) { var text = element.options[element.selectedIndex].text; // ... }
DEMO: http : //jsfiddle.net/6dkun/1/
所有这些function和随机的东西,我认为这是最好的,这样做:
this.options[this.selectedIndex].text
使用 –
$.trim($("select").children("option:selected").text()) //cat
这是小提琴 – http://jsfiddle.net/eEGr3/
您需要获得选项的innerHTML,而不是其值。
使用this.innerHTML
而不是this.selectedIndex
。
编辑:您需要先获取选项元素,然后使用innerHTML。
使用this.selectedIndex
而不是this.selectedIndex
。
尝试下面的内容:
myNewFunction = function(id, index) { var selection = document.getElementById(id); alert(selection.options[index].innerHTML); };
看到这里jsfiddle示例