下拉插件select2的使用总结

偏执的太偏执、 2023-06-19 09:43 23阅读 0赞

#### 一、组件地址 ####

Select2使用示例地址：[https://select2.github.io/examples.html][https_select2.github.io_examples.html]

Select2参数文档说明：[https://select2.github.io/options.html][https_select2.github.io_options.html]

Select2源码：[https://github.com/select2/select2][https_github.com_select2_select2]

#### 二、引用内容： ####

使用select2首先需要引入其js及css文件  
jquery:

css:

js:

#### 三、组件使用效果 ####

1、多选  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xvbmdnZWFpc2lzaQ_size_16_color_FFFFFF_t_70]  
2、远程搜索功能，输入文本动态后台过滤  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xvbmdnZWFpc2lzaQ_size_16_color_FFFFFF_t_70 1]  
3、设置最多只能选几个  
![在这里插入图片描述][20191205165304775.png]

#### 四、使用示例： ####

基础使用：

<div>
     	<select class="singleSelect" style="width: 200px;">
             <option value="">--请选择--</option>
             <option value="">阿里</option>
             <option value="">阿姨</option>
             <option value="">江南</option>
             <option value="">杭州</option>
             <option value="">无锡</option>
             <option value="">上海</option>
         </select>
    </div>
     <script type="text/javascript">
          $(document).ready(function() { 
         	$('.singleSelect').select2();
          });
    </script>

其他用法：  
1、加载本地数据

var data = [{  id: 0, text: 'enhancement' }, {  id: 1, text: 'bug' }, {  id: 2, text: 'duplicate' }, {  id: 3, text: 'invalid' }, {  id: 4, text: 'wontfix' }];
    $("#c01-select").select2({ 
      data: data,
      placeholder:'请选择',
      allowClear:true
    })

2、加载远程数据

$('#territorialId').select2({ 
            language:"zn-CN",
            placeholder:'请选择',
            allowClear: true,//可以清除选项
            ajax: { 
                url: "/territorial/listSelect",
                data: function (params) { 
                    return { 
                        keyWord: params.term || '',    //搜索参数
                        page: params.page || 1,        //分页参数
                        rows: params.pagesize || 10,   //每次查询10条记录
                    };
                },
                processResults: function (data, params) { 
                    params.page = params.page || 1;
                    var list = data.list;
                    list = $.map(list, function (obj) { 
                        obj.text = obj.text || obj.terrName;
                        return obj;
                    });
                    return { 
                        results:list,
                        pagination: { 
                            more: (params.page) < data.totalPage
                        }
                    };
                }
            }
        });

说明：  
1）.url是请求的后台地址

2）.使用后台动态加载数据时传入请求参数params

3）.processResults接收后台返回数据，该回调函数返回一个对象，包含results、pagination属性，后台分也是必须返回pagination，pagination中的more用来判断是否还有下一页

4）.results属性为js对象数据，数组元素中必须包含id，text属性

list = $.map(list, function (obj) \{  
obj.text = obj.text || obj.terrName;  
return obj;  
\});

3、获取选中项

var res=$("#c01-select").select2("data")[0] ; //单选
    var reslist=$("#c01-select").select2("data");    //多选
    if(res==undefined)
    { 
         alert("你没有选中任何项");
    }
    if(reslist.length)
    { 
         alert("你选中任何项");
    }

4、清空选择项和设置不可用

//取消选中
    $("#territorialId").select2("val","all");
    //清空选择
    $("#c01-select").val(null).trigger("change");
    $("#c01-select").val("你的placeholder").trigger("change");//或者
    //如果你使用的是input标签（默认就是本地数据），你可以用$("#c01-select").val('');来清空选项
    //disabled
    $("#c01-select").prop("disabled", false);//可用
    $("#c01-select").prop("disabled", true);//不可用

5、启用多选

$("#c01-select").select2({ 
      data:data,
      multiple: true
    });

#### 五、select2常用的属性 ####

<table> 
 <thead> 
  <tr> 
   <th></th> 
   <th></th> 
   <th></th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>Width</td> 
   <td>字符串</td> 
   <td>控制 宽度 样式属性的Select2容器div</td> 
  </tr> 
  <tr> 
   <td>minimumInputLength</td> 
   <td>int</td> 
   <td>最小数量的字符</td> 
  </tr> 
  <tr> 
   <td>maximumInputLength</td> 
   <td>int</td> 
   <td>最大数量的字符</td> 
  </tr> 
  <tr> 
   <td>minimumResultsForSearch</td> 
   <td>Int</td> 
   <td>最小数量的结果</td> 
  </tr> 
  <tr> 
   <td>maximumSelectionSize</td> 
   <td>int</td> 
   <td>可选择的最大条目数</td> 
  </tr> 
  <tr> 
   <td>placeholder</td> 
   <td>字符串</td> 
   <td>选择初始值</td> 
  </tr> 
  <tr> 
   <td>separator</td> 
   <td>字符串</td> 
   <td>分隔符字符或字符串用来划定id</td> 
  </tr> 
  <tr> 
   <td>allowClear</td> 
   <td>布尔</td> 
   <td>此选项只指定占位符</td> 
  </tr> 
  <tr> 
   <td>multiple</td> 
   <td>布尔</td> 
   <td>Select2是否允许选择多个值</td> 
  </tr> 
  <tr> 
   <td>openOnEnter</td> 
   <td></td> 
   <td>打开下拉如果设置为true,当用户按下回车键,Select2关闭。 默认情况下启用这个选项。</td> 
  </tr> 
  <tr> 
   <td>id</td> 
   <td>函数</td> 
   <td>函数用于获取id从选择对象或字符串id存储代表的关键</td> 
  </tr> 
  <tr> 
   <td>matcher</td> 
   <td>函数</td> 
   <td>用于确定是否搜索词匹配一个选项时使用一个内置的查询功能</td> 
  </tr> 
 </tbody> 
</table>

[https_select2.github.io_examples.html]: https://select2.github.io/examples.html
[https_select2.github.io_options.html]: https://select2.github.io/options.html
[https_github.com_select2_select2]: https://github.com/select2/select2
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xvbmdnZWFpc2lzaQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191205163920850.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xvbmdnZWFpc2lzaQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xvbmdnZWFpc2lzaQ_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191205164021331.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xvbmdnZWFpc2lzaQ==,size_16,color_FFFFFF,t_70
[20191205165304775.png]: https://img-blog.csdnimg.cn/20191205165304775.png