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

Question

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

502

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

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

和

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

但两者都返回空字符串。

- shyam

3

这两个都应该可以工作。问题必须在其他地方（例如，该代码是否包含在 $(document).ready(... 块中？） - karim79

5

这句话的意思是：获取下拉菜单（drop down）中当前选中项（selected）的值（value），并将其赋给变量（var）“value”。翻译如下：var value = $('#dropDownId:selected').val(); -> 获取下拉菜单id为“dropDownId”中被选中的选项的值，赋给变量"value"。 - ant

4

不，$('#dropDownId').val(); 是获取下拉框选中值最简洁的方式。 - karim79

1

@shyam，你不需要在这个语句中使用select，因为ID对于文档是唯一的，当引用类时，你应该只使用标签名select#dropDownId option:selected。 - ant

可能是重复的问题：如何获取select->option标签的索引。 - Chris Moschini

显示剩余2条评论

31个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- rakesh · Answer 1

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

try this

- Bipin · Answer 2

使用以下任意代码

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

或者

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

- Stefan Kelchtermans · Answer 3

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

或者

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

上述代码对我很有效。

- Suresh Burdak · Answer 4

你可以使用其中任何一个：

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

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

            //OR

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

});

- Ruzaik Nazeer · Answer 5

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

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

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

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

- Er.Manoj Singh · Answer 6

使用以下代码行，我们可以获取下拉列表的值。这将起作用：

var getValue = document.getElementById("<%=ddlID.ClientID%>").value;

- Arthur Salgado · Answer 7

你需要像这样放置。

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

- RGriffiths · Answer 8

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

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

- mahdi hosseini · Answer 9

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;

- UTHIRASAMY · Answer 10

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

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