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;

编辑：jQuery是为了完整性（假设jQuery的CSS选择器支持大致相当于Prototype的支持）：

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

Answer 4

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

myOptionNode.childNodes[0];

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

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

myOptionNode.text;

Answer 5

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

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

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

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

Answer 6

如果你使用的是Prototype，你可以这样做：

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

以上是使用CSS选择器，该选择器显示值=“1”的所有选项标记，这些标记位于 id =“my_dropdown”元素内“即可。

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

6 个答案: