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


我怎样才能得到使用jQuery下拉框选定的值?
我试过使用

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

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

但都返回一个空字符串。


Answers



对于单选DOM元素,获取当前选定的值:

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

获取当前选中的文本:

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



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




试试这个jQuery,

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

或者这个javascript,

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

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

看看下面的小提琴链接。

Demo1 | DEMO2




尝试这个

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



我知道这是一个非常古老的帖子,我可能会因为这个可怜的复活而被鞭打,但我想我会分享一些非常有用的小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"); 代替! 通过将两者结合起来并返回一个包含valuetext的对象,就可以获得更多!

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

这节省了我大量宝贵的时间,特别是在重型应用程序上!




又一个测试的例子:

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



这将做的伎俩

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



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



你有没有提供你的选择元素的ID?

<select id='dropDownId'> ...

你的第一个陈述应该工作!




试试这个,它得到的价值是:

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




你的第一个声明应该工作!

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

它将返回当前选定元素的值。




html中的下拉控件生成的id将是动态的。 因此,使用完整的id $('ct100_<Your control id>').val(). 它会工作。




或者,如果你想尝试:

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

我今天用它,它工作正常。




使用

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

这应该工作:)




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



我知道这是旧的,但我虽然我更新与更新的答案

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

我希望这有帮助




$("select[id$=dropDownId]").val()
  • 尝试这个



使用这些代码之一

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

要么

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



这是什么工作

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



对于选定的文本使用:

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

对于选定的值使用:

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



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

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

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

            //OR

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

});



只要使用这个

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



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

要么

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

上面的代码适合我




你需要像这样。

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



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



尝试这个:

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

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