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

How can I get the selected value of a dropdown box using jQuery?
I tried using

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

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

and

和

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

but both return an empty string.

但都返回空字符串。

27 个解决方案

#1

689

For single select dom elements, to get the currently selected value:

对于单个选择dom元素，要获得当前选择的值:

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

To get the currently selected text:

获取当前选定的文本:

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

#2

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

Should work fine, see this example:

应该没问题，请看这个例子:

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

#3

Try this jQuery,

试试这个jQuery,

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

or this javascript,

或者这个javascript,

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

If you need to access the value and not the text then try using val() method instead of text().

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

Check out the below fiddle links.

看看下面的小提琴链接。

Demo1 | Demo2

Demo1 |以及接下来

#4

try this

试试这个

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

#5

I know this is a terribly old post and I should probably be flogged for this pitiful resurrection, but I thought I would share a couple of VERY helpful little JS snippets that I use throughout every application in my arsenal...

我知道这是一个非常古老的帖子，我可能会因为这个可怜的复活而被打，但是我想我将分享一些非常有用的小JS片段，我在我的军火库的每一个应用中都用到……

If typing out:

如果输入:

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

is getting old, try adding these little crumpets to your global *.js file:

正在变老，试着在你的全球*中加入这些小的松脆饼。js文件:

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

and just write soval("#selector"); or sotext("#selector"); instead! Get even fancier by combining the two and returning an object containing both the value and the text!

就写soval(“#选择器”);或sotext(“#选择器”);相反!通过将两个和返回一个包含值和文本的对象结合起来，变得更加漂亮。

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

It saves me a ton of precious time, especially on form-heavy applications!

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

#6

Yet another tested example:

另一个测试的例子:

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

#7

this will do the trick

这就行了。

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

#8

This will alert the selected value. JQuery Code...

这将提醒所选的值。JQuery代码…

$(document).ready(function () {

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

HTML Code...

HTML代码…

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

#9

Did you supply your select-element with an id?

您是否为您的选择元素提供了id?

<select id='dropDownId'> ...

Your first statement should work!

你的第一个陈述应该有效!

#10

Try this, it gets the value:

试试这个，它的值是:

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

$('选择# myField ');(选项:选择).val();

#11

Your first statement should work!!

你的第一个陈述应该有效!!

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

It will return the value of currently selected element.

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

#12

The id that got generated for your drop down control in the html will be dynamic one. So use the complete id $('ct100_<Your control id>').val(). It will work.

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

#13

Or if you would try :

或者你可以试试:

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

I used It today and It working fine.

我今天用了，效果很好。

#14

use

使用

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

This should work :)

这应该工作:)

#15

For selected text use:

对选中的文本使用:

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

For selected value use:

选择值使用:

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

#16

To get the jquery value from drop down you just use below function just sent id and get the selected value:

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

#17

I know this is old but I though I update this with an more up to date answer

我知道这是旧的，但是我更新了这个，有了更多最新的答案。

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

I hope this helps

我希望这有助于

#18

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

try this
试试这个

#19

use either of these codes

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

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

或

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

#20

This is what works

这就是工作

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

#21

You can use any of these:

你可以使用以下任何一个:

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

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

            //OR

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

});

#22

Just use this

就用这个

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

#23

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

或

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

Above codes worked well for me

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

#24

You need to put like this.

你需要这样放。

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

#25

Try this:

试试这个:

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

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

#26

Use the method below to get the selected value on page load:

使用下面的方法获取页面负载的选定值:

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

#27

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

#1

689