Select2 Full Width 主题介绍

Select2 是一个强大的 jQuery 插件，用于创建美观、易于使用的下拉框（select）和自动完成输入框（autocomplete）。Select2 可以根据用户输入使用 AJAX 动态加载选项，处理大型数据集，并可以使用无限滚动来优化性能。

Select2 提供了多个主题，其中 select2 full width 主题是为了更好地适应不同页面的宽度而设计的。该主题的特点是宽度自适应，可以在任何容器中使用，且可以自定义不同状态下的颜色和样式。下面是一些示例：

如何使用 Select2 Full Width 主题

步骤1：引入 Select2 插件和 CSS 样式

在你的 HTML 文件中，你需要引入 Select2 插件和 CSS 样式。这里提供 CDN 的方式引入：

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

步骤2：添加 HTML 代码

下面是一个基本的 HTML 示例，你可以参考它来创建你自己的 Select2 下拉框：

<select class="select2 full-width">
  <option value="AL">Alabama</option>
  <option value="WY">Wyoming</option>
</select>

可以看到，只需指定下拉框的类名为 select2 full-width，就可以应用 Select2 Full Width 主题。

步骤3：初始化 Select2 插件

在你的 JavaScript 代码中，你需要使用 select2() 方法来初始化 Select2 插件。下面是一个示例：

$(document).ready(function() {
  $(".select2.full-width").select2({
    minimumResultsForSearch: -1 // 禁用搜索框
  });
});

此处禁用了搜索框，为了更好地适应全屏宽度。你也可以根据自己的需要自定义各种参数和事件。

自定义 Select2 Full Width 主题

Select2 Full Width 主题是可以自定义的，下面是一些常用的样式类和对应的 CSS 样式：

.select2.full-width {
  width: 100%; /*设置宽度自适应*/
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: #eee; /*设置高亮颜色*/
}

.select2-container--default .select2-selection--single:focus, .select2-container--default .select2-selection--multiple:focus {
  border-color: #8cd7fe; /*设置选中状态的外框颜色*/
  outline: none;
  box-shadow: none;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: #999; /*设置占位符颜色*/
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 32px; /*设置文字和下拉箭头的垂直居中*/
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
  border-color: #999 transparent transparent transparent; /*设置箭头颜色*/
}

.select2-results__option[aria-selected=true] {
  display: none; /*隐藏已选项*/
}

通过修改以上样式类，你可以为 Select2 Full Width 主题设置不同的颜色和样式。