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

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

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

和

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

，但都返回一个空字符串。

这两个都应该起作用。问题必须在其他地方（例如，代码是否包装在$（document）.ready（... block？）中

var value = $（'＃dropDownId：selected'）。val（）;

不-$（'＃dropDownId'）。val（）;是获取所选值的最简洁方法。

@shyam在此语句中不需要选择，因为ID对于文档是唯一的，所以仅在引用classselect＃dropDownId选项时才应使用标签名称：

如何获取select-> option标签的索引的可能重复项

#1 楼

对于单选dom元素，获取当前选择的值：

$('#dropDownId').val();

获取当前选择的文本：

$('#dropDownId :selected').text();

：select之前需要一个空格。

– Interjay
2010年5月6日11:15

获取所选选项文本的最快方法是：$（“＃dropDownId”）。children（“ option”）。filter（“：selected”）。text（）

–RickardN
13年3月21日在10:22

我希望您已链接到.val（）和.text（）的引用

– shareef
13年7月9日在13:35

理查德，您的代码太长了……为了提高可读性，它可能更加简洁

–PositiveGuy
2014年2月13日在21:47

@ JamesM.Lay将DOM引用存储在变量中？然后使用jQuery（domVariable）.val（）

–艾伦·利纳托茨（Allen Linatoc）
16年4月26日在0:45

#2 楼

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!" />

大多数程序员会错过“值”，而声明元素和查询则继续返回文本

–阿萨德
14-9-16'2:40

在此处查看演示freakyjolly.com/demo/getDropDownValue_JavaScript_jQuery.html

–代码间谍
19年5月28日在12:08

#3 楼

试试这个jQuery，

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

或者这个javascript，

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

如果您需要访问值和

查看下面的小提琴链接。演示2

#4 楼

试试这个

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

OP正在要求选择的值。此答案将获得下拉菜单的文本内容。没错，不是他要的。

–约书亚舞
14年5月19日在20:07

#5 楼

我知道这是一个非常古老的帖子，我应该为这次可怜的复活而感到困惑，但是我想我会分享几个非常有用的小JS代码段，这些代码段将在我的军械库的每个应用程序中使用。 br />如果键入：

$("#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的对象，可以得到更出色的表现！应用程序！

#6 楼

这将提醒选定的值。
查询代码...

$(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>

#7 楼

这可以解决问题

$('#dropDownId').val();

#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">-00</option>
<option value="2">-00</option>
<option value="3">q4312078q</option>
<option value="4"></option>
<option value="5">We really appreciate your work</option>
</select>
</body>
</html>

#9 楼

试试这个，它会得到值：

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

#10 楼

您为选择元素提供了ID吗？

<select id='dropDownId'> ...

您的第一个语句应该起作用！

#11 楼

使用

$('#dropDownId').find('option:selected').val()

这应该起作用:)

#12 楼

对于选定的文本，请使用：

value: $('#dropDownId :selected').text();

对于选定的值，请使用：

value: $('#dropDownId').val();

#13 楼

在id中为下拉控件生成的html将是动态的。因此，请使用完整的ID $('ct100_<Your control id>').val().，它将起作用。

#14 楼

或者，如果您尝试：

$("#foo").find("select[name=bar]").val();

我今天用过它，并且工作正常。

#15 楼

要从下拉列表中获取jquery值，只需使用下面的函数，只需发送id并获取选定的值即可：

#16 楼

 	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("vlaue") ;
	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" vlaue="one">one</option>
	<option id="2_two" vlaue="two">two</option>
	<option id="3_three" vlaue="three">three</option>              
</select>
<button id="btndrp" onclick="fundrp()">Tracking Report1234</button>

#17 楼

我知道这已经很老了，但是我虽然用更新的答案来更新它

$( document ).on( 'change', '#combo', function () {
var prepMin= $("#combo option:selected").val();
 alert(prepMin);
});

我希望这会有所帮助

#18 楼

$("select[id$=dropDownId]").val()

试试这个

#19 楼

使用以下任一代码

$('#dropDownId :selected').text();

$('#dropDownId').text();

#20 楼

这是有效的

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

#21 楼

$("#selector <b>></b> option:selected").val()

或

$("#selector <b>></b> option:selected").text()

上面的代码对我来说很有效

#22 楼

您可以使用以下代码来执行此操作。

$('#dropDownId').val();

如果要从选择列表的选项中获取选定的值。这将解决问题。

$('#dropDownId option:selected').text();

#23 楼

您可以使用以下任意一种：

$(document).on('change', 'select#dropDownId', function(){

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

            //OR

            var value = $(this).val();

});

#24 楼

您需要这样放置。

$('[id$=dropDownId] option:selected').val();

#25 楼

试试这个：

 $('#dropDownId option').filter(':selected').text();     

 $('#dropDownId option').filter(':selected').val();

#26 楼

使用以下方法获取页面加载时的选定值：

$(document).ready(function () {
$('#ddlid').on('change', function () {
                var value = $('#ddlid :selected').text();
                alert(value);`
            });
});

#27 楼

如果您有多个下拉菜单，请尝试：

HTML：

<select id="dropdown1" onchange="myFunction(this)">
    <option value='...'>Option1
    <option value='...'>Option2
</select>
<select id="dropdown2" onchange="myFunction(this)">
    <option value='...'>Option1
    <option value='...'>Option2
</select>

JavaScript：

    function myFunction(sel) {
        var selected = sel.value;
    }

#28 楼

HTML：

<select class="form-control" id="SecondSelect">
       <option>5<option>
       <option>10<option>
       <option>20<option>
       <option>30<option>
</select>