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

【问题标题】：How do I access the "displayed" text of a select box option from the DOM?如何从 DOM 访问选择框选项的“显示”文本？
【发布时间】：2010-09-16 13:05:12
【问题描述】：

给定以下 HTML：

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

如何使用 Javascript/DOM 获取字符串“displayed text 1”？

【问题讨论】：

标签： javascript dom

【解决方案1】：

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

myOptionNode.childNodes[0];

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

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

myOptionNode.text;

【讨论】：

您认为选项中会包含哪些其他内容？-) 将其他内容放入其中根本无效！-)
是的，它是无效的，但我没有测试它，所以我不确定如果你在一个选项中放置一个会发生什么。浏览器有时会让你摆脱一些奇怪的事情。

【解决方案2】：

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

【讨论】：

这是假设选择框上有一个id标签。
此代码适用于选定的选项，但一旦您从 options[] 列表中获取任何选项（已选择或未选择），.text 属性将适用于它们。
@Liam - 酷。我发表评论时没有 id。

【解决方案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;

【讨论】：

同样，这里的示例代码假定他想要选定的选项。他的示例只有一个选项，因此可以使用，但一般情况是为 options[] 提供一些其他索引。
没错，但是主题启动器没有定义初始情况。我假设他想获取当前选定选项的文本。如果他想要一个选项的文本并且只知道值，他将不得不使用循环。访问方式相同。
假设是正确的：我确实想要选择的选项，但我应该这么说。

【解决方案4】：

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

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

上面使用了一个 CSS 选择器，它说找到所有 option 标签 value="1" 在具有 id="my_dropdown 的元素内"。

【讨论】：

【解决方案5】：

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

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

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

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

【讨论】：

【解决方案6】：

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

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 选择器支持大致相当于 Prototype 的支持）：

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

【讨论】：