如何从select元素中获取所选选项的文本?

时间:2011-04-15 11:31:28

标签: javascript jquery

编辑:HTML和js bellow是一个简化版本。查看我帖子底部的jsfiddle链接,以充分展示我的问题。


我有一个选择HTML元素:

<select name="foo" id="foo">
<option value="1">a</option>
<option value="2">b</option>
<option value="3">c</option>
</select>

我想用jQuery获取所选选项的标签。但是,这个:

alert($("#foo option:selected").text());

返回:

a
b
c

我想得到的,例如:

b

jsfiddle:http://jsfiddle.net/8KcYY/1/(点击“Vybraťznačku”按钮)。

2 个答案:

答案 0 :(得分:11)

这有效:

<select name="foo" id="foo">
<option value="1">a</option>
<option value="2">b</option>
<option value="3">c</option>
</select>
<input type="button" id="button" value="Button" />

$('#button').click(function() {
    alert($('#foo option:selected').text());
});

亲自尝试:http://jsfiddle.net/Nyenh/

更简单:

$('#foo').change(function(){
    var selected = $(this).find('option:selected');
    alert(selected.val() + ' ' + selected.text());
});

http://jsfiddle.net/qtRhQ/1/

答案 1 :(得分:1)

 $("#dropdownlistID").text();

这将显示“下拉列表”中的所有位置。要仅使用选定的项目:

 $("#dropdownlistID").val();

或尝试

 $("#foo").find(":selected").text()

而不是

$("#foo option:selected").text()