jquery - 删除 Select2 的最后一个选择？

Question

我想创建一个小函数来阻止用户从多选列表中选择 3 个以上的项目。我在网上发现了一些有用的东西，这些东西允许我在用户选择超过 3 个项目时启动警报。但是，我找不到删除最后选定的项目的方法。

到目前为止，这是我的 jQuery:

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

使用这段代码，如果用户选择了 3 个以上的项目，则该代码只会删除用户曾经选择的所有内容，这显然不是我想要的。我在任何地方都找不到任何关于此的信息，有人有想法吗？

提前谢谢

Answer 1

您可以监听change事件并对所选选项进行计数。如果所选选项为 3，则禁用所有其他选项:

$(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>