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

自version 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相同。仅当在选择时检测到不同的项目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);
});

Answer 6

设置.on侦听器以检查特定的select2事件。＆＃34;改变＆＃34;事件与通常相同，但其他事件特定于select2控件：

变化
SELECT2开
SELECT2开
SELECT2闭
SELECT2高亮
SELECT2-选择
SELECT2-除去
SELECT2加载的
SELECT2聚焦

名字不言自明。例如，当您将焦点放在控件上时，select2-focus会触发。

Answer 7

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

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

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

源代码现在看起来像：

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

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

select2 onchange事件只能工作一次

7 个答案: