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

234

我将一个事件绑定到我的select元素的change事件上：

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

});

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

jquery events

— 祖拉基斯
source

1

你为什么这样讲？

— 米格尔（Miguel）

3

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

— adg

哈哈@adg太好了！

— SuperUberDuper '17

460

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

— 纳夫塔利又名尼尔
source

8

$（“ selector”，this）语法是什么意思？我有一个大致的想法，但我不太确定

— JoshWillik 2014年

14

@JoshWillik与$("selector", this)您一起selector在this上下文中找到了所有元素。写作 $("selector", this)几乎是相同的比 $(this).find('selector')

— Bellash

8

@JoshWillik：因为$()是的别名jQuery()，所以您可以在这里找到文档：api.jquery.com/jQuery上面所述的签名显然是jQuery( selector [, context ] )。@Bellash：如果“几乎一样”，有什么区别？还是更快？我更喜欢，.find()因为这更多的是OO IMO ...

— AdrianFöder2014年

7

多重选择时如何检查？

— Hemant_Negi

3

@AdrianFöder对于您和其他正在寻找它的人来说，.find()根据以下答案，它的速度提高了约10％：stackoverflow.com/a/9046288/2767703

— Kevin van Mierlo 2016年

75

您可以使用jQuery find方法

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

上面的解决方案完美地工作，但是我选择为愿意获得clicked选项的他们添加以下代码。即使此选择值未更改，它也允许您获取选定的选项。（仅在Mozilla中测试过）

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

— 贝拉什
source

绑定option事件非常危险，特别是在移动设备上。例如，Webkit不正确支持此事件：bugs.chromium.org/p/chromium/issues/detail?id=5284

— Ian Kemp

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

— 贝拉什'16

15

委托替代

如果有人将委托方法用于其侦听器，请使用e.target（它将引用select元素）。

$('#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演示

— 丹尼尔·ST
source

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

— AVI

6

我发现它更短更清洁。此外，如果有多个项目，则可以迭代选定的项目；

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

— 1.44兆字节
source

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

— BernhardDöbler'16

@BernhardDöbler哪一个？任何来源？

— 1.44mb，2013年

1

我将您的代码复制到IE 11，但出现错误。我结束了this.options[ this.options.selectedIndex ]。Mozilla说Firefox从26开始支持IE，不支持。

— BernhardDöbler'16

6

<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值时获得当前选定的值。

能否请您分享更详细的答案解释？

— Mostafiz '16

@MostafizurRahman我的代码非常简单，这就是为什么我只编写代码的原因。

3

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

— 塞尔达·卡拉卡（Serdar Karaca）
source

2

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

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

— 接收罐
source

如果是这种情况，为什么“ var selectedVal = $（“＃selectElement”）。val（）”不起作用？

— LuisE

在选择元素上发出更改事件时，这种情况正在获得价值。如果选择更改，则值不会更新。

— Recep可以

0

请参阅官方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();

— 亚历克斯·罗索
source

0

您可以使用此jquery select change事件获取选定的选项值

对于演示

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

展开摘要

— 开发者
source