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

【问题标题】：Get selected value of a dropdown's item using jQuery使用 jQuery 获取下拉菜单项的选定值
【发布时间】：2011-02-16 08:34:54
【问题描述】：

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

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

和

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

但两者都返回一个空字符串。

【问题讨论】：

  • 这两个都应该工作。问题一定出在其他地方（例如，代码是否包含在 $(document).ready(... 块中？）
  • var value = $('#dropDownId:selected').val();
  • 不 - $('#dropDownId').val(); 是获取所选值的最简洁方法。
  • @shyam 你不需要在这个语句中选择，因为文档的 ID 是唯一的，你应该只在引用类时使用标签名称select#dropDownId option:selected，
  • How to get the Index of select->option tag 的可能重复项

标签： jquery


【解决方案1】：

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

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

获取当前选中的文本：

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

【讨论】：

  • :selected之前需要一个空格。
  • 获取所选选项文本的最快方式是：$("#dropDownId").children("option").filter(":selected").text()
  • 我希望您将引用链接到 .val() 和 .text()
  • Richard，你的代码太长了……为了可读性，它可以更简洁
  • @JamesM.Lay 存储在变量中的 DOM 引用？然后使用jQuery(domVariable).val()
【解决方案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!" />

【讨论】：

  • "value" 是大多数程序员错过的，而声明元素和查询却不断返回文本
【解决方案3】：

试试这个 jQuery，

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

或者这个javascript，

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

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

查看下面的小提琴链接。

Demo1 | Demo2

【讨论】：

    【解决方案4】：

    试试这个

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

    【讨论】：

    • OP 要求选择值。这个答案将获得下拉菜单的文本内容。没有错，只是不是他要求的。
    【解决方案5】：

    我知道这是一个非常古老的帖子，我可能应该因为这个可怜的复活而受到鞭笞，但我想我会分享几个非常有用的小 JS sn-ps，我在我的武器库中的每个应用程序中都使用它们......

    如果输入：

    $("#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;
}

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

    【讨论】：

      【解决方案6】：

      这将提醒选定的值。 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>

      【讨论】：

        【解决方案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">-$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>

          【讨论】：

            【解决方案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】： 

                        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>

                    【讨论】：

                      【解决方案14】：

                      为html 中的下拉控件生成的id 将是动态的。所以使用完整的 id $('ct100_&lt;Your control id&gt;').val(). 它会起作用。

                      【讨论】：

                        【解决方案15】：

                        我知道这是旧的，但我虽然我用更新的答案更新了这个

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

                        希望对你有帮助

                        【讨论】：

                          【解决方案16】：

                          或者如果你愿意尝试：

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

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

                          【讨论】：

                            【解决方案17】：

                            要从下拉列表中获取 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;
}

                            【讨论】：

                              【解决方案18】：

                              试试这个：

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

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

                              【讨论】：

                                【解决方案19】： 
                                $("select[id$=dropDownId]").val()
                                • 试试这个

                                【讨论】：

                                  【解决方案20】：

                                  使用这些代码中的任何一个

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

                                  或

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

                                  【讨论】：

                                    【解决方案21】：

                                    这是有效的

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

                                    【讨论】：

                                      【解决方案22】： 
                                      $("#selector <b>></b> option:selected").val()

                                      或者

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

                                      以上代码对我来说效果很好

                                      【讨论】：

                                        【解决方案23】：

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

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

                                        如果您想从选择列表的选项中获取选定的值。这样就可以了。

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

                                        【讨论】：

                                          【解决方案24】：

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

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

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

            //OR

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

});

                                          【讨论】：

                                            【解决方案25】：

                                            你需要这样放。

                                            $('[id$=dropDownId] option: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>

                                                  JavaScript：

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

                                                  【讨论】：

                                                  • 请解释如何以及为什么解决问题将真正有助于提高您的帖子质量，并可能导致更多的赞成票。
                                                  【解决方案29】：

                                                  对于正常页面加载的下拉菜单

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

                                                  对于动态添加的选项，请确保 id 保持唯一

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

                                                  【讨论】：

                                                  • 如果您的下拉选项被标记为以编程方式选中（例如来自填充下拉列表的 ajax 请求）怎么办？如果您尝试获取 .val()，则该值将为 null（即使检查源代码会显示该选项确实已被选中）！ $("myDD option:selected").val() 将产生未定义的结果。
                                                  • 这是访问在页面加载期间呈现的元素的最快方法 $(document).on 更改将再次重新扫描文档以找到以编程方式添加的元素我认为他的问题我的回答更合适。
                                                  【解决方案30】： 
                                                  $("#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>

                                                  【讨论】：

                                                    猜你喜欢
                                                    • 1970-01-01
                                                    • 2023-03-05
                                                    • 1970-01-01
                                                    • 1970-01-01
                                                    • 1970-01-01
                                                    • 1970-01-01
                                                    • 2015-07-09
                                                    • 1970-01-01
                                                    • 2016-04-15
                                                    相关资源
                                                    最近更新 更多
                                                    热门标签
                                                    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode