jQuery获取选定选项值（不是文本，而是属性值）

好的，我有这个代码：

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

选择1
选择2

我想得到所选选项的值。 例子：

---

已选择“选项2”，其值为“2”。“2”是我需要得到的值，而不是“选项2”。

2020年4月：已更正的旧答案

对所选选项使用伪选择器，然后使用函数获取选项的值

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

旁注：在第一次查询中使用过滤器比直接使用

：选择的

选择器更好

如果在更改处理程序中，您可以简单地使用

this.value

获取所选选项值。有关更多选项，请参见演示

//在处理程序外部检索所选选项和文本的方法
log（'Selected option value'+$（'select option'）.filter（':Selected'）.val（））；
log（'Selected option value'+$（'select option'）.filter（':Selected'）.text（））；
$（'select'）。在（'change'，函数（）{
//在处理程序外部检索所选选项和文本的方法
console.log（'Changed option value'+this.value）；
console.log（'Changed option text'+$（this）.find（'option'）.filter（':selected'）.text（））；
});

1-文本
2-文本
3-文本
4-文本
您需要在选择中添加一个id。然后：

$（'#selectorID'）.val（）


.val（）
将获取该值。
您可以按如下方式使用
jquery

脚本

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

小提琴是
看看这个例子：

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


请选择
贝宝
网络货币
$（文档）.ready（函数（）{
$（'#帐户名称'）。更改（函数（）{
警报（$（this.val（））；
});
});
我只是想分享我的经验

对我来说

$（'#selectorId'）.val（）

返回null

我不得不使用

$（'#selectorId选项：selected'）.val（）
对于这样的选择

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

或者你可以用价值来代替，并用简单的方法得到它

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

我的一个选项没有值：
------
。我试图使用
if（！$（this.val（））{..}
但是我得到了奇怪的结果。如果
元素上没有
值
属性，它将返回其中的文本，而不是空字符串。如果您不希望
val（）
为您的选项返回任何内容，请确保添加
value=”“
尝试以下操作：

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

或

或

或

这段代码对我来说非常有效：
这将返回所选选项的值。
$（'select'u id'）.find（'option:selected'）.val（）
 来源

使用jQueryval（）获取所选值，使用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>

按钮点击

        $("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());
        });

它工作得更好。试试看

let value=$（“选择#yourId选项”）.filter（“：selected”）.val（）
我添加了id，只是忘了在这里添加它。根据我所了解的，使用id作为选择器是最快的方法。这是浏览器特有的情况吗？是最新版本的chrome不允许它，还是IE不支持它？这是在最新版本的chrome中。可能也在Firefox中，但不确定。不确定为什么
$（“#selectorId option:selected'）。val（）
对我不起作用。相反，我使用了
$（'select option:selected'）.val（）
@Francisco，问题是
$（'select option:selected'）.val（）
将采用HTML代码中第一个选择器的值。而使用
$（'#selectorId option:selected'）.val（）
可以获得指定id的选择器的值。仔细检查打字错误。下面是一个例子，展示了我刚才所说的：进行测试：
$（'select[name=selector]'）.change（function（）{alert（$（this.val（））；}）注意，如果所选选项未指定
值
属性，则将返回标签（即
标签
）。可能并不总是你想要的。当然，在大多数应用程序中，值是指定的。为什么使用
过滤器
更好？还有为什么
.val（）
不起作用？它似乎至少在Chrome中起作用。从评论中不清楚。谢谢你的帮助@FarhadBagherlo“保持键入”不是有用的编辑注释！请总结您的更改，以便编辑历史记录的读者在不检查每个更改的字符的情况下了解您所做的操作。谢谢虽然这段代码可以解决这个问题，但最好添加精化，并向可能不理解这段代码的人解释它是如何工作的。@paper1111这是简单的函数。如果需要，我可以解释$（'select[name=这里是select box name]）.change（）-函数它的意思是当我们更改select box选项时，函数将起作用$（this）.val（）-返回所选选项值Demo tutorial以获取：Demo tutorial用于设置单个和多个Selectbox
$(document).ready(function(){
    var data= $('select').find('option:selected').val();
});

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

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

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

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

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

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