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

這是因爲物品ID是相同的。 只有在選定時檢測到不同的項目標識時，更改纔會觸發。

所以你有2個選項： 首先是確保每個項目都有一個唯一的ID從AJAX檢索數據。

其次是在格式選擇中爲所選項目觸發一個rand數字。

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

。

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

Answer 4

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

Answer 5

設置你的.on監聽器來檢查特定選擇2事件。 「變」事件是一樣平常，但其他特定於選擇2控制這樣的：

• 變化
• 選擇2開
• 選擇2開
• 選擇2關閉
• 選擇2 -highlight
• SELECT2-選擇
• SELECT2-除去
• SELECT2加載
• select2-focus

名稱不言自明。例如，當您將注意力集中在控件上時，select2-focus會觸發。

Answer 6

截至version 4.0.0，諸如select2-selecting之類的事件不再有效。它們被更名爲：現在

• 選擇2，關閉是選擇2：關閉
• 選擇2開現在是選擇2：開放
• 選擇2開現在選擇2是：開放
• 選擇2 - 選擇現在SELECT2：選擇
• SELECT2-除去現在是SELECT2：除去
• SELECT2去除現在是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 7

我選擇2元未燒製onchange事件作爲下拉只提供一個值列表，使得它不可能改變的值。

值沒有改變，沒有事件被觸發，處理程序無法執行。

然後我添加了另一個處理程序來清除該值，select2-open處理程序在onchange處理程序之前執行。

的源代碼現在看起來像：

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

的第一個處理程序將清除值，允許第二處理程序，以火起來，即使選擇相同的值。