Wybór2 rozwijane Multiple wybierz i odznaczyć

Question

Mam select2 rozwijaną z 4 opcji kod jest:

<select id="ddlInqOn" class="InqSelect2 form-control"> 
    <option value="1">--All--</option> 
    <option value="2">Today Date</option> 
    <option value="3">Past Date</option> 
    <option value="4">Feature Date</option> 
</select> 

select2 wywoływana przez ten javascript:

$('.InqSelect2').select2({ 
    dropdownAutoWidth: 'true', 
    multiple: true 
}); 

chcę osiągnąć jak po kliknięciu wszystkie opcje następnie usuń inne opcje i jeśli wybrana jest inna opcja, usuń wszystkie opcje z zaznaczenia.

Próbowałem ten kod:

$('body').on('change', '#ddlInqOn', function() { 
    debugger; 
    // 
}); 

ale zdarzenie zmiana nie jest triggred więc żadnej innej możliwości, aby śledzić zmiany wydarzeniem select2 rozwijanej?

Answer 1

Odpowiedź udzielona przez @Nimeksha działa idealnie w jsfiddle podane przez @ Nimeshka ale w moim kodu nie mogę dostać zdarzenie wyzwalania zmian w rozwijanym i po poszukiwaniach znalazłem rozwiązanie od here. kod jest tutaj:

$(document).on('change', '.InqSelect2', function() { 
     debugger; 
     if (e.params.data.id == 1) { 
      $(this).val(1).trigger('change'); 
     } else { 
      values = $(this).val(); 
      var index = values.indexOf('1'); 

      if (index > -1) { 
       values.splice(index, 1); 
       $(this).val(values).trigger('change'); 
      } 
     } 
    }); 

Próbowałem również:

$('body').on('change', '.InqSelect2', function() { 
     debugger; 
     if (e.params.data.id == 1) { 
      $(this).val(1).trigger('change'); 
     } else { 
      values = $(this).val(); 
      var index = values.indexOf('1'); 

      if (index > -1) { 
       values.splice(index, 1); 
       $(this).val(values).trigger('change'); 
      } 
     } 
    }); 

ale to nie działa. również przez id #ddlInqOn nie działa.

dlaczego powyższy kod działał z $(document).on('change', '.InqSelect2', function() {}); pracował nie wiem ale działa dla mnie.

dzięki jeszcze raz @Nimeshka

Answer 2

Select2 wykorzystuje system zdarzeń jQuery. Można więc dołączyć do zdarzeń select2 przy użyciu metody JQuery on.

Następnie można ustawić wartość wybranego elementu i wyzwolić zdarzenie change, aby zaktualizować pole wyboru.

Możesz zrobić to, o co prosiłeś w następujący sposób.

$('.InqSelect2').on('select2:select', function (e) { 

    if (e.params.data.id == 1){ 
     $(this).val(1).trigger('change'); 
    }else{ 
     values = $(this).val(); 
     var index = values.indexOf('1'); 

     if (index > -1) { 
      values.splice(index, 1); 
      $(this).val(values).trigger('change'); 
     } 
    } 
}); 

Zwróć uwagę, że użyłem "1" jako wartości opcji --Wszystkie--. Jeśli masz wątpliwości, nie pytaj mnie o nic.

https://jsfiddle.net/c6yrLoow/

Nadzieję, że to pomaga :)