如何访问DOM中选择框选项的“显示”文本？

Question

考虑下面的HTML：

<select name="my_dropdown" id="my_dropdown"> 
<option value="1">displayed text 1</option> 
</select> 

如何抢字符串使用Javascript/DOM的 “显示的文本1”？

Answer 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; 
    } 
} 

Answer 2

显示的文本是选项节点的子节点。您可以使用：

myOptionNode.childNodes[0]; 

访问它，假设文本节点是唯一的东西里面的选项（而不是其他标签）。

编辑：噢，正如其他人所提到的，我完全忘了：

myOptionNode.text; 

Answer 3

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; 

Answer 4

如果您正在使用Prototype，你可以得到它这样的：

$$('#my_dropdown option[value=1]').each(function(elem){ 
       alert(elem.text); 
      }); 

以上是使用CSS选择器，说找到所有选项标签有value =“1”这是元素内部有id =“my_dropdown”。

Answer 5

假设你修改了你的代码有点id /类和正在使用jQuery你可以有以下的东西。它会通过选项的文本弹出每个选项的警报。你可能不会想提醒所有的文本，但它说明了如何在首位的文本得到：

 
$('select#id option').each(function() { 
    alert($(this).text()); 
}); 

如果使用类，而不是一个ID，那么你就必须将'select＃id'更改为'select.class'。如果你不想添加一个class/id，还有其他方法可以选择。

如果您想将这条路线作为读者的活动，我会留下一些思路。

Answer 6

假设你想要的选择选项的文本：

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;