select2 onchange事件只能工作一次

Question

我有一个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");

});

Answer 1

这就是我正在使用的:

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

对于最新的jQuery用户,这个应该工作:

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

Answer 2

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

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

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

Answer 3

从版本4.0.0开始,诸如之类的事件select2-selecting不再有效.它们被重命名如下:

• select2-close现在是select2:close
• select2-open现在是select2:open
• select2-opening现在是select2:opening
• select2-selecting现在是select2:选择
• select2-removed现在是select2:已删除
• select2-removal现在是select2:取消选择

参考: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>

Answer 4

这是因为项目ID相同.仅当在select上检测到不同的项ID时,才会触发更改.

所以你有两个选择:首先是确保从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)}

Answer 5

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