select2 onchange 事件仅有效一次答案

【问题标题】：select2 onchange event only works onceselect2 onchange 事件仅有效一次
【发布时间】：2013-07-17 21:20:47
【问题描述】：

我对 jQuery 的 Select2 有疑问。

页面加载时，如果O点击搜索结果会选择并触发onchange事件，但只是第一次。

如果我再次搜索，它不会。

这是我的代码（它是基于 Ajax 的搜索）：

jQuery('#search_code').select2({
    'width': '600px',
    'tokenSeparators': [',', ' '],
    'closeOnSelect': false,
    'placeholder': 'scan or type a SKU or product or ESN',
    'minimumInputLength': 1,
    'ajax': {
        'url': 'lookProduct',
        'dataType': 'json',
        'type': 'POST',
        'data': function (term, page) {
            return {
                barcode: term,
                page_limit: 3,
                page: page
            };
        },
        'results': function (data, page) {
            return {
                results: data
            };
        }
    }
}).on('change', function (e) {
    var str = $("#s2id_search_code .select2-choice span").text();

    DOSelectAjaxProd(this.value, str);
    //this.value
}).on('select', function (e) {
    console.log("select");

});

【问题讨论】：

你在调试器中试过了吗？您是否收到任何错误消息，尤其是在第一个 onchange 事件发生时？
试试$(document).on('change', 'span#search_code', function(... 看看它是否有效。如果 #search_code 是 div 的 id，则用 div 替换 span，或者用“element”替换它是什么类型的“元素”。
是的，这是一个误报。我实际上选择了相同的元素，因此在这种情况下它不会触发更改事件...
哦，但是有一个问题.. onchange 不会在同一个索引上触发...所以如果你有一个 ajax 选择，它有 2 个结果并且你选择了索引 1 .. 那么你再次搜索..你有X结果并再次选择索引1 ..内容可能不同但索引相同..所以我每次都必须强制 onchange 。我该怎么做？
我发现这篇文章与我的问题相似，但是如何修改我的代码？ stackoverflow.com/questions/16062064/…

标签： jquery events onchange jquery-select2

【解决方案1】：

这是我正在使用的：

$("#search_code").live('change', function(){
  alert(this.value)
});

对于最新的 jQuery 用户，这个应该可以工作：

$(document.body).on("change","#search_code",function(){
 alert(this.value);
});

【讨论】：

喜欢第二个建议。干净、简短、实用。

【解决方案2】：

从version 4.0.0 开始，select2-selecting 等事件不再起作用。它们重命名如下：

select2-close 现在是 select2:close

select2-open 现在是 select2:open

select2-opening 现在是 select2:opening

select2-selecting 现在是 select2:selecting

select2-removed 现在是 select2:removed

select2-removing 现在是 select2:unselecting

参考：https://select2.org/programmatic-control/events

(function($){
  $('.select2').select2();
  
  $('.select2').on('select2:selecting', function(e) {
    console.log('Selecting: ' , e.params.args.data);
  });
})(jQuery);

body{
  font-family: sans-serif;
}

.select2{
  width: 100%;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.full.min.js"></script>

<select class="select2" multiple="multiple">
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
  <option value="4">Option 4</option>
  <option value="5">Option 5</option>
  <option value="6">Option 6</option>
  <option value="7">Option 7</option>
</select>

【讨论】：

【解决方案3】：

显然，如果在使用数据时已经存在选择，则不会触发更改事件。我最终在选择时手动更新数据以解决问题。

$("#search_code").on("select2-selecting", function(e) {
    $("#search_code").select2("data",e.choice);
});

我知道这已经很晚了，但希望这个答案可以节省其他人的时间。

【讨论】：

好一个...我为动态下拉列表修改如下： $(document).on('select2-selecting','#search_code',function(e){ $('#search_code' ).select2('data', e.choice); });
我也注意到了同样的行为。如果已经选择了一个项目，则在选择另一个项目时不会触发更改事件。看看@cpugourou 的回答。确保项目具有唯一的 Id 会触发 Change 事件。
我不明白你的介绍性评论......你想更详细一点吗？

【解决方案4】：

$('#search_code').select2({
.
.
.
.
}).on("change", function (e) {
      var str = $("#s2id_search_code .select2-choice span").text();
      DOSelectAjaxProd(e.val, str);
});

【讨论】：

这如何回答这个问题？与原来的问题有什么不同？
在我看来完全一样。您声称您正在回答 OP 的问题。这如何回答这个问题？哪里错了？现在是什么？

【解决方案5】：

这是由于项目 ID 相同。仅当在选择时检测到不同的项目 ID 时才会触发更改。

所以你有两个选择：首先是确保从 ajax 检索数据时每个项目都有一个唯一的 id。

其次是在formatSelection处为选中的item触发一个随机数。

function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

.

formatSelection: function(item) {item.id =getRandomInt(1,200)}

【讨论】：

【解决方案6】：

设置您的.on 侦听器以检查特定的 select2 事件。 “更改”事件与往常一样，但其他事件是特定于 select2 控件的：

改变
select2-opening
select2-打开
select2-关闭
select2-highlight
select2-选择
select2-removed
select2-加载
选择2-焦点

名称是不言自明的。例如，select2-focus 在您将焦点置于控件时触发。

【讨论】：

【解决方案7】：

我的 select2 元素没有触发 onchange 事件，因为下拉列表只提供了一个值，因此无法更改该值。

值没有改变，没有事件被触发，处理程序无法执行。

然后我添加了另一个处理程序来清除值，select2-open 处理程序在 onchange 处理程序之前执行。

源代码现在看起来像：

el.on("select2-open", function(e) {
    $(this).val('');
});
el.on('change', function() {
    ...
});

第一个处理程序清除该值，即使选择相同的值也允许第二个处理程序启动。

【讨论】：