javascript - 如何从 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

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 3

假设您想要所选选项的文本：

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;

Edit: And jQuery for completeness' sake (assuming jQuery's CSS selector support is roughly equivalent to that of Prototype's):

var selectText = $('#my_dropdown option[selected]').get(0).text;

Answer 4

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

myOptionNode.childNodes[0];

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

编辑： 哦，是的，正如其他人提到的，我完全忘记了：

myOptionNode.text;

Answer 5

假设您稍微修改了代码以在 id/class 上添加一个 id / class 并使用 jQuery，您可能会得到以下内容。它将为每个选项弹出一个带有选项文本的警报。您可能不想提醒所有文本，但它首先说明了如何获取文本：

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

如果您使用类而不是 id，那么您只需将“select#id”更改为“select.class”。如果您不想添加类/ID，还有其他方法可以选择。

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

Answer 6

如果您使用的是Prototype，则可以这样处理：

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

上面使用了一个 CSS 选择器，该选择器表示找到所有带有id="my_dropdown"的元素内的value="1"选项标签。