27

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

});
4

7 回答 7

33

这就是我正在使用的：

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

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

$(document.body).on("change","#search_code",function(){
 alert(this.value);
});
于 2013-08-11T22:11:34.757 回答
17

从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>

于 2017-09-12T11:25:32.350 回答
16

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

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

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

于 2014-05-02T22:53:34.337 回答
9 
$('#search_code').select2({
.
.
.
.
}).on("change", function (e) {
      var str = $("#s2id_search_code .select2-choice span").text();
      DOSelectAjaxProd(e.val, str);
});
于 2016-02-06T11:32:45.760 回答
7

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

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

其次是在 formatSelection 为所选项目触发一个随机数。

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

.

formatSelection: function(item) {item.id =getRandomInt(1,200)}
于 2015-02-06T01:48:33.920 回答
2

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

  • 改变
  • select2-打开
  • select2-打开
  • select2-关闭
  • select2-高亮
  • select2-选择
  • select2-删除
  • select2-加载
  • 选择2焦点

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

于 2016-04-14T14:00:21.457 回答
2

My select2 element was not firing the onchange event as the drop down list offered only one value, making it impossible to change the value.

The value not having changed, no event was fired and the handler could not execute.

I then added another handler to clear the value, with the select2-open handler being executed before the onchange handler.

The source code now looks like:

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

The first handler clears the value, allowing the second handler to fire up even if selecting the same value.

于 2017-11-29T21:21:34.223 回答