Question

我正在尝试做一些非常简单的事情，但这对我不起作用。我想要做的就是在更改所选选项时获取所选选项的文本，如下所示：

<select id = "myselect">
  <option value = "1">One</option>
  <option value = "2">Two</option>
  <option value = "3">Three</option>
</select>

然后在JavaScript中：

$("#myselect").change(function () {
     var text = $(this).find("option[selected]").html();
     alert(text);
});

简单吧？问题是我只是变空了。当我检查DOM时，我发现更改所选选项不会更改任何选项的“selected”属性。不更改选项通常会更新DOM吗？我很确定我以前做过这个。我在这里缺少什么？我正在使用FireFox ver 13.0.1进行测试。

Answer 1

这应该使用jQuery：

$("#myselect").change(function () {
    var text = $(':selected',this).text();
    alert(text);
});

<强> jsFiddle example

或者，如果您只想使用纯JavaScript：

document.getElementById('myselect').onchange = function() {
    alert(document.getElementById("myselect")[document.getElementById("myselect").selectedIndex].innerHTML);
}

<强> jsFiddle example

Answer 2

您想使用:selected选择器。查看示例here

$( '#myselect' ).change(function () {
    var text = $( this ).children( 'option:selected' ).text();
    alert( text );
});

现场演示： http://jsfiddle.net/xjhFf/

Answer 3

$(this).find("option:selected").html();

Answer 4

更改为

    var text = $(this).find("option:selected").html();

Answer 5

您可以使用selectedIndex属性并按索引检索项目。

获取选定的选项文本

5 个答案: