Zdarzenie select2 onchange działa tylko raz

Question

Mam problem z wyborem2 jQuery.

Po załadowaniu strony, jeśli O kliknie wynik wyszukiwania, wybierze i wyzwoli zdarzenie, ale tylko za pierwszym razem.

Jeśli wyszukuję inny czas, nie będzie.

Oto mój kod (to Ajax opiera się wyszukiwanie):

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

to czego używam:

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

najnowsze użytkowników jQuery, ten powinien działać:

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

Answer 2

Podobno zdarzenie zmiany nie jest wywoływane, jeśli zaznaczenie już istnieje podczas korzystania z danych. Skończyło się na ręcznym aktualizowaniu danych przy wyborze, aby rozwiązać problem.

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

Wiem, że jest dość późno, ale mam nadzieję, że ta odpowiedź pozwoli zaoszczędzić czas.

Answer 3

Jest to spowodowane tym, że identyfikator pozycji jest taki sam. W przypadku zmiany pożaru tylko w przypadku wybrania innego identyfikatora przedmiotu.

Masz 2 opcje: Po pierwsze, upewnij się, że każdy element ma unikalny identyfikator podczas pobierania danych z ajax.

Druga to wyzwolenie numeru Rand w opcji formatSelection dla wybranej pozycji.

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

Ustaw .on słuchacza w celu sprawdzenia określonych zdarzeń select2. "Zmień" wydarzenie jest taka sama jak zwykle, ale inne są specyficzne dla kontrolki select2 tak:

• zmiana
• select2 otwarcie
• select2 otwarte
• select2-close
• select2 -highlight
• select2 wybieranie
• select2 usuniętym
• select2 załadowane
• select2-focus

Nazwy są oczywiste. Na przykład: select2-focus jest wywoływany, gdy fokus zostanie uaktywniony.

Answer 6

Od version 4.0.0, wydarzenia takie jak select2-selecting, już nie działają.Są one przemianowane następująco:

• select2-close to teraz select2: blisko
• select2 otwarty jest teraz Select2: otwarty
• select2 otwarcie jest teraz Select2: otwarcie
• select2 wybieranie teraz jest Select2: wybierając
• select2-usuwany jest teraz select2: usunięto
• select2 usuwania jest teraz select2: odznaczania

Ref: 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

Moja elementem select2 nie wyzwalania zdarzenia onchange jak rozwijanej listy oferowanej tylko jedną wartość w dół, uniemożliwiając, aby zmienić wartość.

Wartość nie uległa zmianie, żadne zdarzenie nie zostało wywołane i procedura obsługi nie mogła zostać wykonana.

Następnie dodałem kolejną procedurę obsługi, aby wyczyścić wartość, a procedura obsługi select2-open jest wykonywana przed operatorem onchange.

kod Źródłem teraz wygląda:

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

Pierwszy obsługi kasuje wartość, dzięki czemu druga obsługi odpalić nawet jeśli wybierając tę ​​samą wartość.