javascript - 禁止删除多选选项中的最后一个值 - select2

Question

所选的选项来自数据库。现在我想要，我可以删除任意两个值，但最后一个值无法删除。我尝试过 disabled: true 但不知道如何限制不删除姓氏。提前致谢。

$(document).ready(function(){
    $("#test").select2({
      tags: true,
      tokenSeparators: [',', ' ']
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
    
<select id="test" multiple style="width:250px" name="lastname">
  <option value="1" selected="selected">One</option>
  <option value="2" selected="selected">Two</option>
  <option value="3" selected="selected">Three</option>
</select>

Answer 1

这应该适合你。请参阅official documentation了解更多此类事件。

$(document).ready(function(){
    $("#test").select2({
      tags: true,
      tokenSeparators: [',', ' ']
    });
    $('#test').on("select2:unselecting", function (e) {
      if($(this).val().length === 1) {
        alert("You cannot remove last value");
        e.preventDefault();
      }
    })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
    
<select id="test" multiple style="width:250px" name="lastname">
  <option value="1" selected="selected">One</option>
  <option value="2" selected="selected">Two</option>
  <option value="3" selected="selected">Three</option>
</select>