使用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();