jQuery选择更改事件获取选择的选项

Posted 2023-05-09

【中文标题】jQuery选择更改事件获取选择的选项

【英文标题】：jQuery select change event get selected option

【发布时间】：2012-09-26 20:22:54

【问题描述】：

我在我的选择元素的更改事件上绑定了一个事件：

$('select').on('change', '', function (e) 

);

如何访问发生更改事件时被选中的元素？

【问题讨论】：

@superuberduper 我尽可能地避免使用 jquery，但抵抗是徒劳的。被同化后你会感觉好多了。

【参考方案1】：

$('select').on('change', function (e) 
    var optionSelected = $("option:selected", this);
    var valueSelected = this.value;
    ....
);

【讨论】：

$("selector", this) 语法是什么意思？我有一个大概的想法，但我不完全确定

@JoshWillik 和$("selector", this) 您在this 的上下文中找到所有selector 元素。写$("selector", this)和$(this).find('selector')差不多

@JoshWillik：由于$() 是jQuery() 的别名，您可以在此处找到文档：api.jquery.com/jQuery 声明的签名显然是jQuery( selector [, context ] )。 @Bellash：如果它“几乎相同”，有什么区别？或者什么更快？我更喜欢.find()，因为这更OO IMO...

多选时如何检查？

@AdrianFöder 对于您和其他正在寻找它的人来说，.find() 根据这个答案快了大约 10%：***.com/a/9046288/2767703

【参考方案2】：

你可以使用jQuery find方法

 $('select').change(function () 
     var optionSelected = $(this).find("option:selected");
     var valueSelected  = optionSelected.val();
     var textSelected   = optionSelected.text();
 );

上述解决方案完美运行，但我选择为愿意获得点击选项的他们添加以下代码。即使此选择值未更改，它也允许您获取所选选项。 （仅在 Mozilla 上测试过）

    $('select').find('option').click(function () 
     var optionSelected = $(this);
     var valueSelected  = optionSelected.val();
     var textSelected   = optionSelected.text();
   );

【讨论】：

绑定到option 事件是一个冒险的提议，尤其是在移动设备上。例如，Webkit 不正确支持此事件：bugs.chromium.org/p/chromium/issues/detail?id=5284

好酷！正如我所说，许多浏览器不支持第二种解决方案！

【参考方案3】：

委托替代

如果有人使用delegated approach 作为他们的监听器，请使用e.target（它将引用选择元素）。

$('#myform').on('change', 'select', function (e) 
    var val = $(e.target).val();
    var text = $(e.target).find("option:selected").text(); //only time the find is required
    var name = $(e.target).attr('name');

JSFiddle Demo

【讨论】：

+1 因为这是我想要的，但是当我在本地尝试时，它不起作用。仅在 jsfiddle 工作，我必须添加什么 CDN？

【参考方案4】：

<select id="selectId">
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
</select>


$('#selectId').on('change', function () 
     var selectVal = $("#selectId option:selected").val();
);

首先创建一个select option。之后使用jquery，当用户更改select option 值时，您可以获得当前选择的值。

【讨论】：

你能分享一下你的答案更详细的解释吗？

@MostafizurRahman 我的代码很简单，这就是我只写代码的原因。

简单和更少的代码谢谢，我正在寻找这个答案。

【参考方案5】：

我觉得这个更短更干净。此外，如果有多个，您可以遍历选定的项目；

$('select').on('change', function () 
     var selectedValue = this.selectedOptions[0].value;
     var selectedText  = this.selectedOptions[0].text;
);

【讨论】：

selectedOptions 并非在所有浏览器中都可用。

@BernhardDöbler 哪个？有什么来源吗？

我将您的代码复制到 IE 11 并出现错误。我最终得到了this.options[ this.options.selectedIndex ]。 Mozilla 表示 Firefox 从 26 开始支持，IE 不支持。

除IE外所有浏览器都支持。 developer.mozilla.org/en-US/docs/Web/API/htmlSelectElement/…

【参考方案6】：

$('#_SelectID').change(function () 
        var SelectedText = $('option:selected',this).text();
        var SelectedValue = $('option:selected',this).val();
);

【参考方案7】：

另一种获取所选值的简短方法，

$('#selectElement').on('change',function()
   var selectedVal = $(this).val();
                       ^^^^  ^^^^ -> presents #selectElement selected value 
                         |
                         v
               presents #selectElement, 
);

【讨论】：

如果是这种情况，为什么不能 "var selectedVal=$("#selectElement").val()" 工作¿

当在选择元素上发出的更改事件时，情况是获取值。如果您这样做，选择更改时不会更新值。

【参考方案8】：

这也可以正常工作

(function(jQuery) 
  $(document).ready(function() 
    $("#select_menu").change(function() 
      var selectedOption = $("#select_menu").val()
    );
  );
)(jQuery);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>

【参考方案9】：

查看官方 API 文档 https://api.jquery.com/selected-selector/

这个好作品：

$( "select" ).on('change',function() 
  var str = "";
  // For multiple choice
  $( "select option:selected" ).each(function() 
    str += $( this ).val() + " "; 
  );
);

和

$( "select" ).on('change',function() 
  // For unique choice
  var selVal = $( "select option:selected" ).val(); 
);

并且容易做出独特的选择

var SelVal = $( "#idSelect option:selected" ).val();

【参考方案10】：

您可以使用此 jquery 选择更改事件来获取选定的选项值

For Demo

$(document).ready(function ()    
    $('body').on('change','#select', function() 
         $('#show_selected').val(this.value);
    );
); 

<!DOCTYPE html>  
<html>  
<title>Learn Jquery value Method</title>
<head> 
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> 
</head>  
<body>  
<select id="select">
 <option value="">Select One</option>
    <option value="php">PHP</option>
    <option value="jAVA">JAVA</option>
    <option value="Jquery">jQuery</option>
    <option value="Python">Python</option>
    <option value="mysql">Mysql</option>
</select>
<br><br>  
<input type="text" id="show_selected">
</body>  
</html>