Как получить значение clicked в нескольких плагинах select2 jQuery?

Question

$(document.body).on('change','.product-dropdown',function(){ 
    var selectVaule = $(this).val(); 
    if(selectVaule){ 
     alert(selectVaule+ 'select'); 
    } 
}); 

Выше кода возвращает все выбранное значение в массиве. Я хочу получить только самое последнее значение щелчка при множественном выборе 2.

Answer 1

К сожалению, насколько я знаю, нет элегантного решения.

В основном только отслеживать все значения и посмотреть, какие из них являются новыми (обратите внимание, что lastClicked может быть список, потому что можно выбрать несколько значений одновременно):

var lastClicked= null; 
var prevClicked = []; 

$('.product-dropdown').change(function(){ 
    var curClicked = this.val(); 
    lastClicked = curClicked.filter(function(x) { return prevClicked.indexOf(x) < 0 }); 
}); 

Answer 2

 var prevClicked = []; 
     var curClicked = []; 
     var difference = []; 

     $('.product-dropdown').change(function(){ 
      curClicked = $(this).val(); 
      if(curClicked == null){ 
       curClicked=[]; 
      } 
      clickType = getClickType(); 
      var clickedValue = diffArray(curClicked, prevClicked); 
      console.log(clickType + ' ' + clickedValue); 

      prevClicked = curClicked; 

     }); 

     function getClickType(){ 
      var prevLen = prevClicked.length; 
      var CurLen = curClicked.length; 
      if(prevLen < CurLen){ 
       return 'select'; 
      } 
      else{ 
       return 'unselect'; 
      } 
     } 

     function diffArray(a1, a2) { 
      var a = [], diff = []; 
      for (var i = 0; i < a1.length; i++) { 
       a[a1[i]] = true; 
      } 
      for (var i = 0; i < a2.length; i++) { 
       if (a[a2[i]]) { 
        delete a[a2[i]]; 
       } else { 
        a[a2[i]] = true; 
       } 
      } 
      for (var k in a) { 
       diff.push(k); 
      } 
      return diff; 
     } 

Answer 3

взгляд на select2:select и event.params.data

Существует также select2:unselect.

$('select').select2() 
 

 
$('select').on('select2:select', function(e) { 
 
    var data = e.params.data; 
 
    console.log(data.id); 
 
    console.log(data.text); 
 
}); 
 

 
$('select').on('select2:unselect', function(e) { 
 
    var data = e.params.data; 
 
    console.log(data.id); 
 
    console.log(data.text); 
 
});

<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.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.css" rel="stylesheet" /> 
 

 
<select multiple="multiple"> 
 
    <option></option> 
 
    <option value="1">foo</option> 
 
    <option value="2">bar</option> 
 
    <option value="3">foo bar</option> 
 
</select>