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

442

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

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

和

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

但都返回一个空字符串。

jquery

— 夏姆
source

3

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

— karim79 2010年

4

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

— 蚂蚁

2

不，这$('#dropDownId').val();是获取所选值的最简洁方法。

— karim79

1

@shyam，因为ID对于文档是唯一的，所以您无需在此语句中选择select，仅应在引用类时使用标签名称select#dropDownId option:selected，

— ant

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

— Chris Moschini 2014年

840

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

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

获取当前选定的文本：

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

— 彼得·麦格
source

11

您需要一个空格:selected。

— 2010年

53

获取所选选项文本的最快方法是：$("#dropDownId").children("option").filter(":selected").text()

— RickardN 2013年

3

我希望你链接引用.val()和.text()

— 谢里夫

8

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

— PositiveGuy

2

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

— 艾伦·利纳托奇

57

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

展开摘要

— 尼克·里夫
source

4

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

— Asad

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

— 代码间谍

22

试试这个jQuery，

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

或这个javascript，

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

如果您需要访问值而不是文本，请尝试使用val()method代替text()。

查看以下小提琴链接。

演示1 | 演示2

— 幸运
source

14

尝试这个

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

— 克瓦迪亚塔尔
source

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

— 2014年

12

我知道这是一个非常古老的帖子，我应该为这次可怜的复活而感到困惑，但是我想我会分享几个非常有用的小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;
}

它为我节省了很多宝贵的时间，尤其是在形式繁多的应用中！

— DevlshOne
source

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>

— 乌泰亚
source

8

这可以解决问题

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

— 辛格尔顿
source

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>

— 斯里克
source

4

试试这个，它得到的价值：

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

— 恩杰洛·里戈
source

3

您是否为选择元素提供了ID？

<select id='dropDownId'> ...

您的第一个陈述应该起作用！

— 沙特尔
source

3

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

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

对于选定的值，请使用：

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

— hi
source

2

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

— 文克HV
source

2

或者，如果您尝试：

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

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

— 固体
source

2

采用

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

这应该工作:)

— 纳米拉
source

2

要从下拉列表中获取jquery值，只需使用刚发送的以下函数id并获取所选值：

function getValue(id){
    var value = "";
    if($('#'+id)[0]!=undefined && $('#'+id)[0]!=null){
        for(var i=0;i<$('#'+id)[0].length;i++){
            if($('#'+id)[0][i].selected == true){
                if(value != ""){
                    value = value + ", ";
                }
                value = value + $('#'+id)[0][i].innerText;
            }
        }
    }
    return value;
}

— 维伦德拉·卡德（Virendra Khade）
source

艰辛的方法，但是不管用什么。

— MC9000

2

	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>

展开摘要

— 沙吉苏丹
source

1

我知道这很旧，但是我虽然用最新的答案来更新它

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

我希望这有帮助

— mindmyweb
source

1

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

尝试这个

— rakesh
source

1

使用这些代码之一

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

要么

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

— 比平
source

1

这是有效的

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

— Shittu约瑟夫·奥卢本加
source

1

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

要么

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

上面的代码对我来说很好

— 斯蒂芬·凯尔特曼（Stefan Kelchtermans）
source

1

您可以通过使用以下代码来做到这一点。

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

如果要从选择列表的选项中获取选定的值。这将达到目的。

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

— 杜丽丝·德·科斯塔
source

0

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

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

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

            //OR

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

});

— 苏雷什·布尔达克（Suresh Burdak）
source

0

您需要像这样放。

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

— 亚瑟·萨尔加多（Arthur Salgado）
source

0

尝试这个：

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

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

— 萨拉瓦纳德
source

0

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

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

— 授权
source

0

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

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;
    }

— 格里菲斯
source

0

HTML：

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

JavaScript：

var value = $('#SecondSelect')[0].value;

— 马赫迪·侯赛尼
source

请说明如何解决该问题以及为什么解决该问题确实有助于提高您的帖子质量，并可能导致更多的投票。

— Android

-1

$("#dropDownId").val('2');
var SelectedValue= $("#dropDownId option:selected").text();
$(".ParentClass .select-value").html(SelectedValue);


<p class="inline-large-label button-height ParentClass" >
     <label for="large-label-2" class="label">Country <span style="color: Red;">*</span><small></small></label>
     <asp:DropDownList runat="server" ID="dropDownId " CssClass="select" Width="200px">          
    </asp:DropDownList>
</p>

— Muddassir Irahad
source

-1

这应该为你工作

  $("#dropDownId").on('change',function(){
     var value=$(this).val();
     alert(value);
  });

— 穆罕默德·鲁扎克
source

如果您的下拉选项已通过编程方式标记为已选中（例如来自填充下拉列表的ajax请求），该怎么办？如果尝试获取.val（），则该值将为null（即使检查源将显示该选项的确已选中）！$（“ myDD option：selected”）。val（）将产生未定义的。

— MC9000，19年