select2 多选：禁用（锁定）某些选定的选项

Question

我的代码中有一个选择下拉列表，如下所示。 我想在那里保留一些预选的选项。 一些预选的选项应该是固定的，这样用户就不能改变它们。 为了做到这一点，我编写了以下代码：

<select id="select2-multiple" name="users" multiple="multiple" style="width: 50%">
    <option value="4">Admin</option>
    <option value="5">Manager</option>
    <option disabled="disabled" selected value="6">User</option>
    <option selected value="7">ReadOnly User</option>
    <option disabled="disabled" selected value="8">Assistant Manager</option>
</select>
<script>
    $(document).ready(function () {
        $('#select2-multiple').select2();
    });
</script>

预选的选项显示没有问题。 但是那些带有disabled="disabled"仍然可以从列表中删除。 如何防止删除这些选项？

Answer 1

我找到它了。 我需要使用 select2 的locked功能。 所以我所要做的就是将问题中的代码更改为：

<select
  id="select2-multiple"
  name="users"
  multiple="multiple"
  style="width: 50%"
>
  <option value = "4">Admin</option>
  <option value = "5">Manager</option>
  <option locked="locked" selected value = "6">User</option>
  <option selected value = "7">ReadOnly User</option>
  <option locked="locked" selected value = "8">Assistant Manager</option>
</select>
<script>
  $(document).ready(function() {
  $('#select2-multiple').select2();
});
</script>

所以基本上使用locked而不是禁用。 但是，我最初使用的是 select2 3.2 版，这在那里不起作用。 我必须升级到 3.5.4 才能使用此功能。

文档可以在这里找到：

http://select2.github.io/select2/#locked-selections

我发现这个 SOF 线程也很有帮助：

如何使用锁定选择实现 select2