select2 onchange 事件仅有效一次

Posted 2023-05-07

【中文标题】select2 onchange 事件仅有效一次

【英文标题】：select2 onchange event only works once

【发布时间】：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 。我该怎么做？

我发现这篇文章与我的问题相似，但是如何修改我的代码？ ***.com/questions/16062064/…

【参考方案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() 
    ...
);

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