Entfernen Sie die letzte Auswahl von Select2?

Question

Ich möchte eine kleine Funktion erstellen, die den Benutzer daran hindert, mehr als 3 Elemente aus einer Mehrfachauswahlliste auszuwählen. Ich habe einige nützliche Dinge im Internet gefunden, die es mir erlaubten, eine Warnung zu starten, wenn der Benutzer mehr als 3 Elemente auswählt. Ich kann jedoch keine Möglichkeit finden, den zuletzt ausgewählten Eintrag zu entfernen.

Bisher ist hier meine jQuery:

$('.metiersMission').change(function(event) { 
if ($(this).val().length > 3) { 
    alert('Vous ne pouvez choisir que 3 métiers'); 
    $(this).select2('val', ''); 
} 
}}); 

Mit diesem Code, wenn der Benutzer mehr als 3 Artikel auswählt, wird der Code einfach löscht alles den Benutzer jemals ausgewählt, was natürlich nicht der Fall ist, was ich will . Ich kann nirgendwo etwas finden, irgendjemand hat eine Idee?

Vielen Dank im Voraus

Answer 1

Sie zu change Ereignis hören können und die ausgewählten Optionen zählen. Wenn die ausgewählten Optionen 3 sind, deaktivieren Sie alle anderen Optionen:

$(document).on('change', 'select', function() { 
 
    var that = $(this); 
 
    var val = that.val(); 
 
    if (val.length > 2) { 
 
    // Find every unselected option and disable them 
 
    that.find('option').not(':selected').attr('disabled','disabled'); 
 
    } else { 
 
    // Enable all options 
 
    that.find('option').removeAttr('disabled'); 
 
    } 
 
});

select { width:250px; height:150px }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<select multiple> 
 
    <option value="volvo">Volvo</option> 
 
    <option value="saab">Saab</option> 
 
    <option value="opel">Opel</option> 
 
    <option value="audi">Audi</option> 
 
    <option value="citroen">Citroen</option> 
 
    <option value="peugeot">Peugeot</option> 
 
</select>

Answer 2

Sie auf Änderung auf jedes Kind hören kann, und sich weigern, ein Kind zu wählen, wenn es mehr als 3 Kinder ausgewählt:

$('.metiersMission').children('option').each(
    $(this).change(function(event) { 
     if ($(this).parent('select').val().length > 3) { 
      alert('Vous ne pouvez choisir que 3 métiers'); 
      $(this).removeAttr('selected'); 
     } 
    }}); 
)};