169

好的，我有这个代码：

<select name="selector" id="selector">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>

我想获得所选选项的值。示例：选择“选项2”，其值为“2”。“2”是我需要得到的值，而不是“选项 2”。

4

14 回答 14

298

04/2020：更正了旧答案

在选定的选项上使用:selected伪选择器，然后使用.val函数获取选项的值。

$('select[name=selector] option').filter(':selected').val()

旁注：使用过滤器比:selected在第一个查询中直接使用选择器更好。

如果在更改处理程序中，您可以简单地使用this.value来获取选定的选项值。有关更多选项，请参见演示。

//ways to retrieve selected option and text outside handler
console.log('Selected option value ' + $('select option').filter(':selected').val()); 
console.log('Selected option value ' + $('select option').filter(':selected').text());

$('select').on('change', function () {
  //ways to retrieve selected option and text outside handler
  console.log('Changed option value ' + this.value);
  console.log('Changed option text ' + $(this).find('option').filter(':selected').text());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<select>
  <option value="1" selected>1 - Text</option>
  <option value="2">2 - Text</option>
  <option value="3">3 - Text</option>
  <option value="4">4 - Text</option>
</select>

老答案：

编辑：正如许多人指出的那样，这不会返回选定的选项值。

~~ 使用.val获取所选选项的值。见下文，

$('select[name=selector]').val()~~
于 2012-10-26T15:32:45.923 回答
129

我只是想分享我的经验

为了我，

$('#selectorId').val()

返回空值。

我不得不使用

$('#selectorId option:selected').val()

于 2014-07-16T10:27:11.823 回答
24 
$('select').change(function() {
    console.log($(this).val())
});​

jsFiddle 示例

.val()将获得价值。

于 2012-10-26T15:33:42.337 回答
10

您需要为您的选择添加一个 ID。然后：
$('#selectorID').val()

于 2012-10-26T15:32:50.480 回答
7

试试这个：

$(document).ready(function(){
    var data= $('select').find('option:selected').val();
});

或者

var data= $('select').find('option:selected').text();
于 2017-06-28T10:50:51.663 回答
5

你可以使用jquery如下

脚本

  $('#IDOfyourdropdown').change(function(){
    alert($(this).val());
  });

小提琴在这里

于 2012-10-26T15:39:53.430 回答
2

对于这样的选择

<select class="btn btn-info pull-right" id="list-name" style="width: auto;">
   <option id="0">CHOOSE AN OPTION</option>
   <option id="127">John Doe</option>
   <option id="129" selected>Jane Doe</option>

...您可以通过以下方式获取 id：

$('#list-name option:selected').attr('id');

或者您可以改用价值，并以简单的方式获得它......

<select class="btn btn-info pull-right" id="list-name" style="width: auto;">
   <option value="0">CHOOSE AN OPTION</option>
   <option value="127">John Doe</option>
   <option value="129" selected>Jane Doe</option>

像这样：

$('#list-name').val();
于 2016-06-22T22:37:52.773 回答
2

我的一个选项没有价值：<option>-----</option>. 我试图使用if (!$(this).val()) { .. }，但我得到了奇怪的结果。事实证明，如果您的元素上没有value属性<option>，它会返回其中的文本而不是空字符串。如果您不想val()为您的选项返回任何内容，请确保添加value="".

于 2016-09-03T21:14:58.497 回答
1

这段代码对我来说效果很好：这会返回所选选项的值。$('#select_id').find('option:selected').val();

于 2017-11-24T15:39:45.643 回答
1 
 $(document ).ready(function() {
    $('select[name=selectorname]').change(function() { 
     alert($(this).val());});
 });
于 2018-05-02T10:28:55.163 回答
0

看例子：

    <select class="element select small" id="account_name" name="account_name"> 

        <option value="" selected="selected">Please Select</option>           
        <option value="paypal" >Paypal</option>
        <option value="webmoney" >Webmoney</option>

    </select>

 <script type="text/javascript">

        $(document).ready(function(){ 
             $('#account_name').change(function(){
               alert($(this).val());                                                          
             });
        });
 </script>
于 2014-01-22T23:06:23.747 回答
0 
$('#selectorID').val();

或者

$('select[name=selector]').val();

或者

$('.class_nam').val();
于 2017-08-22T19:57:39.447 回答
0

来源链接

使用 jQuery val()获取选定值，使用text()获取选项文本。

    <select id="myDropDown" class="form-control">
        <option value="0">Select Value 0</option>
        <option value="8">Option value 8</option>
        <option value="5">Option value 5</option>
        <option value="4">Option value 4</option>
    </select>

选择下拉菜单上的更改事件

        $("#myDropDown").change(function () {

            // Fetching Value
            console.log($(this).val());

            // Fetching Text
            console.log($(this).find('option:selected').text());

            alert('Value: '+$(this).val()+' | Text: '+$(this).find('option:selected').text());
        });

按钮点击

        $("button").click(function () {

        // Fetching Value
            console.log($("#myDropDown").val());

    // Fetching Text
            console.log($('#myDropDown option:selected').text());

            alert('Value: '+$("#myDropDown").val()+' | Text: '+$('#myDropDown option:selected').text());
        });
于 2020-02-07T05:13:59.147 回答
0

它工作得更好。尝试一下。

let value = $("select#yourId option").filter(":selected").val();

于 2020-11-23T08:44:08.730 回答