logo标签列表

使用jQuery获取下拉菜单选项的选定值

jquery
502

如何使用jQuery获取下拉框的选定值？
我尝试使用以下代码：

var value = $('#dropDownId').val();

和

var value = $('select#dropDownId option:selected').val();

但两者都返回空字符串。

3
这两个都应该可以工作。问题必须在其他地方（例如，该代码是否包含在 $(document).ready(... 块中？） - karim79
5
这句话的意思是：获取下拉菜单（drop down）中当前选中项（selected）的值（value），并将其赋给变量（var）“value”。翻译如下：var value = $('#dropDownId:selected').val(); -> 获取下拉菜单id为“dropDownId”中被选中的选项的值，赋给变量"value"。 - ant
4
不，$('#dropDownId').val(); 是获取下拉框选中值最简洁的方式。 - karim79
1
@shyam，你不需要在这个语句中使用select，因为ID对于文档是唯一的，当引用类时，你应该只使用标签名select#dropDownId option:selected。 - ant
可能是重复的问题：如何获取select->option标签的索引。 - Chris Moschini
显示剩余2条评论
31个回答
944

对于单选DOM元素，获取当前选定的值：

$('#dropDownId').val();
获取当前选定的文本：
$('#dropDownId :selected').text();
11
在“:selected”之前需要加一个空格。 - interjay
57
获取所选选项文本的最快方法是：$("#dropDownId").children("option").filter(":selected").text() - RickardN
3
我希望你能提供关于 .val() 和 .text() 的链接参考。 - shareef
9
Richard，你的代码太长了...为了可读性，它可以更加简洁。 - PositiveGuy
2
@JamesM.Lay 一个存储在变量中的DOM引用？然后使用jQuery(domVariable).val()。 - Allen Linatoc
显示剩余7条评论
62
var value = $('#dropDownId:selected').text()

应该可以正常工作，可以参考这个例子：

$(document).ready(function(){ 
  $('#button1').click(function(){ 
    alert($('#combo :selected').text());
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="combo">
  <option value="1">Test 1</option>
  <option value="2">Test 2</option>
</select>
<input id="button1" type="button" value="Click!" />

5
“价值”是大多数编码人员在声明元素时忽略的，而查询却不断返回文本。 - Asad
27

试试这个 jQuery

$("#ddlid option:selected").text();

或者这个 JavaScript：

 var selID=document.getElementById("ddlid");
 var text=selID.options[selID.selectedIndex].text;

如果需要访问值而不是文本，则尝试使用val()方法而不是text()。

请查看以下fiddle链接。

演示1 | 演示2

14

试一下

$("#yourDropdown option:selected").text();
OP正在询问所选值。这个答案将获取下拉列表的文本内容。并不是错误的，只是不符合他的要求。 - Joshua Dance
13

我知道这是一个非常老的帖子，我应该因为这个可怜的“复活”而受到惩罚，但我想分享几个非常有用的JS片段，我在我的所有应用程序中都使用...

如果要打出：

$("#selector option:selected").val() // or
$("#selector option:selected").text()

如果你的代码变得陈旧了，可以尝试在全局的*.js文件中添加这些小点心：

function soval(a) {
    return $('option:selected', a).val();
}
function sotext(a) {
    return $('option:selected', a).text();
}

只需编写soval("#selector");或sotext("#selector");即可！如果你想更高级，可以将两者组合起来，返回一个包含value和text的对象！

function so(a) {
    my.value = $('option:selected', a).val();
    my.text  = $('option:selected', a).text();
    return my;
}

它为我节省了大量宝贵的时间，尤其是在表单繁重的应用程序中！

9

这将会弹出选中的值。 JQuery代码...

$(document).ready(function () {

        $("#myDropDown").change(function (event) {
            alert("You have Selected  :: "+$(this).val());
        });
    });

HTML 代码...

<select id="myDropDown">
        <option>Milk</option>
        <option>Egg</option>
        <option>Bread</option>
        <option>Fruits</option>
    </select>
8

又是一个经过测试的例子：

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
    $('#bonus').change(function() {
    alert($("#bonus option:selected").text());
  });  
});
</script>
</head>

<body>
<select id="bonus">
<option value="1">-$5000</option>
<option value="2">-$2500</option>
<option value="3">$0</option>
<option value="4">$1</option>
<option value="5">We really appreciate your work</option>
</select>
</body>
</html>
8
这将解决问题。
$('#dropDownId').val();
5

试试这个，它会获取值：

$('select#myField').find('option:selected').val();

4

    function fundrp(){
    var text_value = $("#drpboxid option:selected").text();  
    console.log(text_value);
    var val_text = $("#drpboxid option:selected").val();  
    console.log(val_text);
    var value_text = $("#drpboxid option:selected").attr("value") ;
    console.log(value_text);
    var get_att_value = $("#drpboxid option:selected").attr("id") 
    console.log(get_att_value);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<select id="drpboxid">
    <option id="1_one" value="one">one</option>
    <option id="2_two" value="two">two</option>
    <option id="3_three" value="three">three</option>              
</select>
<button id="btndrp" onclick="fundrp()">Tracking Report1234</button>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接