select2使以前选择的选项不可删除 - CSS

Select2是一个流行的下拉选择插件，它可以让选择输入变得更加易用。在这里我们将介绍使用CSS使以前选择的选项不可删除。

步骤

1. 在HTML中引入Select2

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.1.0/css/select2.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.1.0/js/select2.full.min.js"></script>

<select class="js-example-basic-multiple" name="states[]" multiple="multiple">
  <option value="AL">Alabama</option>
  <option value="WY">Wyoming</option>
</select>

2. 初始化Select2

$(document).ready(function() {
  $('.js-example-basic-multiple').select2({
      placeholder: "Select a state",
      allowClear: true,
      tags: true
  });
});

3. 添加CSS样式使以前选择的选项不可删除

.select2-selection__choice[aria-selected=true] .select2-selection__choice__remove {
  display: none;
}

解释

我们使用CSS样式select2-selection__choice[aria-selected=true] .select2-selection__choice__remove来隐藏以前选择的选项的“删除”按钮。选择器的意思是：选择属性aria-selected为turue的.select2-selection__choice元素下的.select2-selection__choice__remove元素。display: none的声明将其隐藏。

结论

通过添加CSS样式，我们可以使Select2中以前选择的选项不可删除。这是一个非常实用的功能，特别是当您需要确保用户选择了某些选项并禁止删除它们时。