Select2中文帮助文档详解

Select2是一个用于优化下拉列表和输入框的jQuery插件，它提供了很多功能强大的选项，可以使用户选择更加快捷方便，本文将从多个方面为大家详细阐述Select2的应用以及相关问题的解决。

一、基本介绍

Select2可以被用来代替HTML的select元素，或者同普通的input元素一起使用。它可以根据输入内容来动态地加载选项，并且提供多选、搜索、标签和自定义渲染等功能。

下面是一个简单的Select2实例：

    
        <select class="js-example-basic-single" name="state">
          <option value="AL">Alabama</option>
          <option value="WY">Wyoming</option>
        </select>
        <script>
          $(document).ready(function() {
            $('.js-example-basic-single').select2();
          });
        </script>
    

在这个例子中，我们只需要引入Select2的CSS和JS，并在需要代替的select元素上添加类名"js-example-basic-single"，在script标签中调用Select2即可进行替换。

二、选项加载

有时候我们需要动态地加载下拉框的选项，Select2提供了三种方式进行选项加载：静态数组、AJAX请求和函数。

1、静态数组

静态数组是一种简单的方式，我们可以在HTML中以<option>标签的形式定义选项，然后再将这个select元素应用到Select2上。如果我们想添加静态选项，只需要修改HTML即可。

    
        <select class="js-example-array">
          <option value="AL">Alabama</option>
          <option value="WY">Wyoming</option>
        </select>
        <script>
          $(document).ready(function() {
            var data = [
              {id: 0, text: 'enhancement'},
              {id: 1, text: 'bug'},
              {id: 2, text: 'duplicate'},
              {id: 3, text: 'invalid'},
              {id: 4, text: 'wontfix'}
            ];
        
            $(".js-example-array").select2({
              data: data
            });
          });
        </script>
    

在这个例子中，我们直接在JS中定义了一个数组，然后将其作为参数传递给Select2。由于option标签中的"value"属性已经和JavaScript数组对象中的"id"属性类似，因此在data数组中也只使用"id"和"text"两个值对选项进行定义。

2、Ajax请求

如果数据量比较大的话，我们通常采用Ajax请求的方式进行列表展示。它可以进行远程搜索、远程选项添加以及显示结果集等功能，形式与静态数组非常相似。

    
        <select class="js-data-example-ajax">
          <option value="3620194" selected="selected">select2/select2</option>
        </select>
        
        <script>
          $(document).ready(function() {
        
            function formatRepo(repo) {
              if (repo.loading) return repo.text;
        
              var markup = "<div class='select2-result-repository clearfix'>" +
                "<div class='select2-result-repository__avatar'>" +
                "  <img class='select2-result-repository__avatar-img' src='" + repo.owner.avatar_url + "' />" +
                "</div>" +
                "<div class='select2-result-repository__meta'>" +
                "  <div class='select2-result-repository__title'>" +
                "    " + repo.full_name +
                "  </div>";
        
              if (repo.description) {
                markup += "<div class='select2-result-repository__description'>" + repo.description + "</div>";
              }
        
              markup += "<div class='select2-result-repository__statistics'>" +
                "  <div class='select2-result-repository__forks'>" +
                "    <i class='fa fa-flash'></i> " + repo.stargazers_count +
                "  </div>" +
                "  <div class='select2-result-repository__stargazers'>" +
                "    <i class='fa fa-star'></i> " + repo.watchers_count +
                "  </div>" +
                "  <div class='select2-result-repository__contributors'>" +
                "    <i class='fa fa-user'></i> " + repo.forks_count +
                "  </div>" +
                "</div>" +
                "</div></div>";
        
              return markup;
            }
        
            function formatRepoSelection(repo) {
              return repo.full_name || repo.text;
            }
        
            $(".js-data-example-ajax").select2({
              ajax: {
                url: "https://api.github.com/search/repositories",
                dataType: 'json',
                delay: 250,
                data: function(params) {
                  return {
                    q: params.term,
                    page: params.page
                  };
                },
                processResults: function(data, params) {
                  params.page = params.page || 1;
        
                  return {
                    results: data.items,
                    pagination: {
                      more: (params.page * 30) < data.total_count
                    }
                  };
                },
                cache: true
              },
              escapeMarkup: function(markup) {
                return markup;
              }, 
              minimumInputLength: 1,
              templateResult: formatRepo,
              templateSelection: formatRepoSelection
            });
        
          });
        </script>
    

3、函数。

当我们需要动态生成选项时，可以使用JavaScript函数来覆盖默认的Ajax加载过程。这需要我们在初始化时将一个函数传入"processResults"属性中。

    
        <select id="example-plugin"></select>
        <script>
            $(document).ready(function() {
                function getResult() {
                    return $([
                        {id:"1", text:"第一项"},
                        {id:"2", text:"第二项"},
                        {id:"3", text:"第三项"}
                    ]);
                }
                $("#example-plugin").select2({
                  ajax:{
                    processResults:function(){ }
                  },
                  tags:true,
                  createTag:function(){return null;}
                }).append(getResult());
            });
        </script>
    

三、多选功能

Select2提供了多选功能，不像HTML select，Select2允许用户可以在一个输入框中选择多个值，选中的值会以标签的形式展现。

    
        <select class="js-example-basic-multiple js-states form-control" multiple="multiple">
          <option value="AL">Alabama</option>
          <option value="WY">Wyoming</option>
        </select>
        
        <script>
          $(document).ready(function() {
            $('.js-example-basic-multiple').select2();
          });
        </script>
    

如果需要对选中项进行一些操作，比如求和、统计个数等，可以使用以下代码：

    
        $('#案件所在区域， #涉案地点').on('change', function() {
          var caseRegions = $('#案件所在区域').val() || [];
          var locations = $('#涉案地点').val() || [];
        
          var count = caseRegions.length + locations.length;
          $('#count').text(count.toString());
        });
    

这段代码监听select列表的变化， 当选中的值发生变化时，获取选中项的长度并进行相应操作。

四、搜索功能

Select2可以根据用户的输入来动态地加载选项，这也意味着它可以作为一个搜索框来使用。

下面我们创造一个实例，根据搜索结果展示电影海报：

    
        <input type="text" name="q" class="form-control js-data-example-ajax" />
        <script>
          $(document).ready(function() {
        
            function formatRepo(movie) {
              if (movie.loading) return movie.text;
        
              var $container = $(
                "<div class='select2-result-repository clearfix'>" +
                  "<div class='select2-result-repository__avatar'></div>" +
                  "<div class='select2-result-repository__meta'></div>" +
                  "<div class='select2-result-repository__description'></div>" +
                "</div>"
              );
        
              $container.find(".select2-result-repository__avatar").append("<img src='" + movie.url + "' />"); 
              $container.find(".select2-result-repository__meta").append("<div class='select2-result-repository__title'>" + movie.title + "</div>");
              $container.find(".select2-result-repository__description").append(movie.plot);
              return $container;
            }
        
            function formatRepoSelection(movie) {
              return movie.title || movie.text;
            }
        
            $(".js-data-example-ajax").select2({
              ajax: {
                url: "https://www.omdbapi.com/",
                dataType: 'json',
                delay: 250,
                data: function(params) {
                  return {
                    q: params.term + '*',
                    page: params.page
                  };
                },
                processResults: function(data, params) {
                  params.page = params.page || 1;
        
                  return {
                    results: data.Search,
                    pagination: {
                      more: (params.page * 10) < data.totalResults
                    }
                  };
                },
                cache: true
              },
              escapeMarkup: function(markup) {
                return markup;
              }, 
              minimumInputLength: 1,
              templateResult: formatRepo,
              templateSelection: formatRepoSelection
            });
        
          });
        </script>
    

注意，这个例子中，我们使用了一个API接口去获取电影海报，如果需要使用，请保持请求速度，不然会一直载入。

五、标签

标签是Select2中一种强大的机制，它可以从输入框中获得多个单一的值，并根据这些值创建标签，原生的HTML中并不支持标签，所以这是一个很好的补充。

代码如下：

    
        <select class="js-example-basic-multiple" name="states[]" multiple="multiple">
          <option value="AL">Alabama</option>
          <option value="WY">Wyoming</option>
        </select>
        <script>
          $(document).ready(function() {
            $('.js-example-basic-multiple').select2({
              tags: true
            });
          });
        </script>
    

在这个例子中，只需要添加"tags: true"选项就可以实现标签的功能。

六、自定义渲染

Select2默认渲染效果不是非常好看，如果我们需要改变样式，可以为每一个选项提供自定义渲染。

    
        <select id="e6" style="width:300px;">
          <option value="o1">Option one</option>
          <option value="o2">Option two</option>
          <option value="o3">Option three</option>    
        </select>
        <script type="text/javascript">
            var newOption = new Option("New text", "new