jQuery 获取选定的选项值（不是文本，而是属性“值”）答案

【问题标题】：jQuery get selected option value (not the text, but the attribute 'value')jQuery 获取选定的选项值（不是文本，而是属性“值”）
【发布时间】：2012-10-26 15:31:36
【问题描述】：

好的，我有这个代码：

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

我想获得所选选项的值。例子： '选项2'被选中，它的值为'2'。 “2”是我需要得到的值，而不是“选项 2”。

【问题讨论】：

标签： jquery html html-select

【解决方案1】：

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()~~

【讨论】：

做你的测试：$('select[name=selector]').change(function() { alert($(this).val()); });
请注意，如果选择的选项没有指定value属性，则将返回标签（即<option>label</option>）。可能并不总是你想要的。当然，在大多数应用程序中，值是指定的。
为什么使用filter 更好？还有为什么.val() 不起作用？它似乎至少在 Chrome 中有效。从 cmets 不清楚。感谢您的帮助！
对我来说 .val() 似乎工作正常，有什么理由不使用它？
这不起作用，但如果你使用.find 而不是.filter 你可能会成功:wink:

【解决方案2】：

我只是想分享我的经验

对我来说，

$('#selectorId').val()

返回空值。

我不得不使用

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

【讨论】：

是浏览器特有的情况吗？是不是最新版的chrome不允许，还是IE不支持？
它在最新版本的 Chrome 中。也许也在 Firefox 中，但不确定。
不知道为什么$('#selectorId option:selected').val() 对我不起作用。相反，我使用了$('select option:selected').val()
@Francisco 问题是$('select option:selected').val() 会取HTML 代码中第一个选择器的值。而使用$('#selectorId option:selected').val()，您可以获得您指定的选择器的值。仔细检查拼写错误。这是一个显示我刚才所说的示例：codepen.io/anon/pen/Nqgqyz

【解决方案3】：

$('select').change(function() {
    console.log($(this).val())
});

jsFiddle example

.val() 将获取值。

【讨论】：

【解决方案4】：

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

【讨论】：

我已经添加了id，只是忘了在这里添加。
从我读到的使用 ID 作为选择器是最快的方法。

【解决方案5】：

试试这个：

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

或

var data= $('select').find('option:selected').text();

【讨论】：

【解决方案6】：

你可以使用jquery如下

脚本

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

FIDDLE 是here

【讨论】：

【解决方案7】：

对于这样的选择

<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');

或者您可以使用 value 代替，并以简单的方式获得它...

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

【讨论】：

【解决方案8】：

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

【讨论】：

【解决方案9】：

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

【讨论】：

【解决方案10】：

 $(document ).ready(function() {
    $('select[name=selectorname]').change(function() { 
     alert($(this).val());});
 });

【讨论】：

虽然这段代码可以解决问题，但最好补充说明一下，并为可能不理解这段代码的人解释它是如何工作的。
@paper1111 这是简单的功能。我可以解释这是否需要。 $('select[name = here is select box name]) .change() - 函数它的意思是当我们改变选择框选项功能将起作用。 $(this).val() - 它返回选定的选项值

【解决方案11】：

看例子：

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

【讨论】：

【解决方案12】：

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

或

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

或

$('.class_nam').val();

【讨论】：

@FarhadBagherlo “继续输入”不是有用的编辑评论！请总结您的更改，以便编辑历史的读者了解您所做的工作，而无需检查每个更改的字符。谢谢！

【解决方案13】：

来源Link

使用 jQuery val() 来 GET 选择的值和 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());
        });

【讨论】：

【解决方案14】：

效果更好。试试看。

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

【讨论】：