jQuery选择器更改事件获取所选选项

Question

我使用以下代码在我的选择器元素的变化事件上绑定了一个事件：

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

});

当change事件发生时，如何访问被选中的元素？

- Zulakis

---

我尽量偏离jquery，但抗拒无益。一旦你被同化，你会感觉好很多。 - adg

Answer 1

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

- Naftali

---

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

使用 $("selector", this)，你可以在 this 的上下文中查找所有的 selector 元素。写成 $("selector", this) 几乎与 $(this).find('selector') 相同。 - Bellash

@JoshWillik说：由于“$()”是“jQuery()”的别名，因此您可以在此处找到文档：https://api.jquery.com/jQuery/ 其中明确说明的签名为“jQuery（选择器[，上下文]）”。@Bellash说：如果它们“几乎相同”，那么有什么区别？或者哪个更快？我更喜欢使用“.find（）”，因为在我看来这更面向对象... - Adrian Föder

如何在多选情况下进行检查？ - Hemant_Negi

对于你和其他需要的人，根据这个回答：https://dev59.com/KnE95IYBdhLWcg3wXcvd#9046288，`.find()`会快大约10%。 - Kevin van Mierlo

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

- Bellash

---

绑定option事件是一项风险较高的操作，特别是在移动设备上。例如，Webkit无法正确支持此事件：https://bugs.chromium.org/p/chromium/issues/detail?id=5284 - Ian Kemp

好的，很酷！就像我说的那样，第二种解决方案在许多浏览器中都不受支持！ - Bellash

Answer 3

委托事件

如果有人在使用委托方式作为他们的监听器，请使用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演示

- DanielST

---

+1 是我想要的，但是当我在本地尝试时，它不起作用。只有在 jsfiddle 上才能工作，我需要添加哪些 CDN？ - AVI

Answer 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的值时，您可以获取当前选择的值。

- user6270989

---

请问您能否分享更详细的解释？ - Mostafiz

@MostafizurRahman 我的代码非常简单，所以我只写了代码。 - user6270989

简单且代码量少，谢谢。我正在寻找这个答案。 - ORHAN ERDAY

Answer 5

我认为这种方法更加简洁明了。此外，如果选定的项有多个，您可以通过迭代来处理它们。

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

- tozlu

---

selectedOptions 在所有浏览器中都不可用。 - Bernhard Döbler

@BernhardDöbler 哪些？有任何来源吗？ - tozlu

我将你的代码复制到IE 11中，但出现了错误。最终我使用了this.options[ this.options.selectedIndex ]。Mozilla表示该方法在Firefox 26及以上版本中支持，但IE不支持。 - Bernhard Döbler

它被除IE以外的所有浏览器支持。 https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLSelectElement/selectedOptions - tozlu

Answer 6

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

- Serdar Karaca

Answer 7

另一种获取选定值的简短方式：

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

- Recep Can

---

如果是这种情况，为什么 "var selectedVal=$("#selectElement").val()" 不起作用呢？ - LuisE

当选择元素发出更改事件时，该案例会获得值。如果您这样做，当选择更改时，值不会被更新。 - Recep Can

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

- mickySimons

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

- alex Roosso

Answer 10

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

演示

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

- Developer