select2 onchange事件仅适用一次

2021/01/29 05:22 · jquery ·  · 0评论

我对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");

});

这就是我正在使用的:

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

对于最新的jQuery用户,这应该可以:

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

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-remove现在为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>

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

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

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

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

这是因为项目ID相同。仅在选择时检测到其他商品ID时,才会触发on change。

因此,您有2个选择:首先是要确保从ajax检索数据时每个项目都有唯一的ID。

第二个是在formatSelection处为所选项目触发一个rand号。

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

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

设置您的.on侦听器以检查特定的select2事件。“更改”事件与往常相同,但其他事件特定于select2控件,因此:

  • 更改
  • 选择2打开
  • select2-打开
  • select2关闭
  • select2-highlight
  • 选择2-选择
  • select2已移除
  • select2加载
  • select2-focus

名称是不言自明的。例如,select2-focus当您将焦点放在控件上时将触发。

我的select2元素未触发onchange事件,因为下拉列表仅提供一个值,因此无法更改该值。

值未更改,未触发任何事件,并且处理程序无法执行。

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

现在的源代码如下所示:

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

第一个处理程序清除该值,即使选择相同的值,第二个处理程序也可以启动。

本文地址:http://jquery.askforanswer.com/select2-onchangeshijianjinshiyongyici.html
文章标签: ,   ,   ,  
版权声明:本文为原创文章,版权归 admin 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!