如何訪問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;