如何访问DOM中选择框选项的“显示”文本?
考虑下面的HTML:如何访问DOM中选择框选项的“显示”文本?
<select name="my_dropdown" id="my_dropdown">
<option value="1">displayed text 1</option>
</select>
如何抢字符串使用Javascript/DOM的 “显示的文本1”?
var sel = document.getElementById("my_dropdown");
//get the selected option
var selectedText = sel.options[sel.selectedIndex].text;
//or get the first option
var optionText = sel.options[0].text;
//or get the option with value="1"
for(var i=0; i<sel.options.length; i++){
if(sel.options[i].value == "1"){
var valueIsOneText = sel.options[i].text;
}
}
显示的文本是选项节点的子节点。您可以使用:
myOptionNode.childNodes[0];
访问它,假设文本节点是唯一的东西里面的选项(而不是其他标签)。
编辑:噢,正如其他人所提到的,我完全忘了:
myOptionNode.text;
其他哪个con你认为这会在一个选项里面? - )把其他东西放进去根本无效!) – roenving 2008-10-10 15:11:41
这是真的,它是无效的,但我没有测试它,所以我不确定会发生什么,如果例如,您在选项中放置了一个。浏览器有时会让你摆脱不安的东西。 – 2008-10-10 15:13:48
var mySelect = document.forms["my_form"].my_dropdown;
// or if you select has a id
var mySelect = document.getElementById("my_dropdown");
var text = mySelect.options[mySelect.selectedIndex].text;
如果您正在使用Prototype,你可以得到它这样的:
$$('#my_dropdown option[value=1]').each(function(elem){
alert(elem.text);
});
以上是使用CSS选择器,说找到所有选项标签有value =“1”这是元素内部有id =“my_dropdown”。
假设你修改了你的代码有点id /类和正在使用jQuery你可以有以下的东西。它会通过选项的文本弹出每个选项的警报。你可能不会想提醒所有的文本,但它说明了如何在首位的文本得到:
$('select#id option').each(function() { alert($(this).text()); });
如果使用类,而不是一个ID,那么你就必须将'select#id'更改为'select.class'。如果你不想添加一个class/id,还有其他方法可以选择。
如果您想将这条路线作为读者的活动,我会留下一些思路。
假设你想要的选择选项的文本:
var select = document.getElementById('my_dropdown');
for(var i = 0; i < select.options.length; i++) {
if(select.options[i].selected) {
break;
}
}
var selectText = select.options[i].text;
在原型:
var selectText = $$('#my_dropdown option[selected]')[0].text;
编辑:和jQuery为了完整性(假设jQuery的CSS选择器的支持是大体相当的原型的):
var selectText = $('#my_dropdown option[selected]').get(0).text;
这是假定选择框上有一个id标记。 – Rontologist 2008-10-10 15:11:32