Select 2

Select 2 是一个强大而灵活的下拉选择框库，可以在输入时动态搜索，也可以支持多选和标签功能，同时允许自定义模板和数据源。

安装

npm

npm install select2

直接引入

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" integrity="sha512-9jK07z5itb47ePrlqcOxlfnxwS5AGBa1fWBqtJIoqxzPb9G4UhkR6KoF6UphWN1Uf/j6UcqjtKquJzt1qMhxLA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js" integrity="sha512-9NKP4p4C+mev8fPAWGrZspGwJjKINwi+UBPlyoOQO9XhjJlQ2sOp0q7VjKxJgEWOnVNTYvNo/jHcV1z9jyTbTg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

使用方法

基本用法

<select class="select2">
  <option value="1">选项 1</option>
  <option value="2">选项 2</option>
  <option value="3">选项 3</option>
  <option value="4">选项 4</option>
</select>
<script>
  $(document).ready(function() {
    $('.select2').select2();
  });
</script>

动态搜索

<select class="select2-full" multiple>
  <option value="option-1">选项 1</option>
  <option value="option-2">选项 2</option>
  <option value="option-3">选项 3</option>
  <option value="option-4">选项 4</option>
</select>

<script>
  $(document).ready(function() {
    $('.select2-full').select2({
      placeholder: '请输入搜索内容',
      allowClear: true
    });
  });
</script>

自定义模板

<select class="select2-template">
  <option value="1">选项 1</option>
  <option value="2">选项 2</option>
  <option value="3">选项 3</option>
  <option value="4">选项 4</option>
</select>
<script>
  $(document).ready(function() {
    $('.select2-template').select2({
      templateResult: function(data) {
        var $result = $("<span></span>");
        $result.text(data.text);
        if (data.element && data.element.hasAttribute("data-icon")) {
          var $icon = $("<i></i>");
          $icon.addClass("icon-" + $(data.element).attr("data-icon"));
          $result.prepend($icon);
        }
        return $result;
      },
      templateSelection: function(data) {
        return data.text;
      },
    });
  });
</script>

API 文档

更多 API 请查阅 官方文档。

总结

Select 2 是一个非常方便和易于实现的下拉选择框库，支持多项功能，如搜索，动态选择以及自定义模板等等。对于需要提供丰富选择的网站或应用程序开发人员来说，它是一个非常不错的选择。