Select2 基于 jQuery 的下拉列表美化插件 - 文章教程

Select2 基于 jQuery 的下拉列表美化插件

发布于 2020-03-25 字数 9388 浏览 1186 评论 0

Select2是一款基于 jQuery 的下拉列表插件,主要用来优化 Select,支持单选和多选,同时也支持分组显示、列表检索、远程获取数据等众多好用的功能

项目地址:https://select2.org/

基本使用

需要用到的 JS 和 CSS 文件位于项目代码下的 dist 目录中,将这个目录中的对应文件放入你的项目里,然后引入页面即可

引入CSS/JS 文件

引入CSS/JS 文件,由于 Select2 是基于 Jquery 的,所以要先引入 Jquery,这里我们都直接引入 CDN 的地址

<!-- 加载 Jquery -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<!-- 加载 Select2 -->
<link target="_blank" class="external-link" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.8/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.8/js/select2.min.js"></script>

初始化 Select2

<select class="form-control">
    <option value="">-----单选-----</option>
    <option value="1">OPS-COFFEE-A</option>
    <option value="2">OPS-COFFEE-B</option>
    <option value="3">OPS-COFFEE-C</option>
    <option value="4">OPS-COFFEE-D</option>
    <option value="5">OPS-COFFEE-E</option>
    <option value="6">OPS-COFFEE-F</option>
    <option value="7">OPS-COFFEE-G</option>
</select>
<script>
var selectorx = $('#id_select2_demo1').select2();
</script>

完成以上两步可以看到页面效果如下

Select2 基于 jQuery 的下拉列表美化插件

设置提示语 placeholder

$('#id_select2_demo1').select2({
    placeholder: '请选择'
});
  • placeholder: 选择框的提示语,需要注意,要想让这个提示语生效,需要 select 的 option 里边有一个 value 为空的 option,例如上边例子中的
<option value="">-----单选-----</option>

隐藏搜索框

与默认的 Select 除了样式上的区别外,最重要的是多了个搜索框,能用来搜索 option 项,如果你不想显示这个搜索框,可以通过设置项 minimumResultsForSearch 隐藏

var selectorx = $('#id_select2_demo1').select2({
    minimumResultsForSearch: -1
});

加载本地数据

除了实例化已经存在的 Select 之外,也可以通过设置项 data 加载本地数据

var sdata = [
    {id: 1, text:'OPS-COFFEE-1'},
    {id: 2, text:'OPS-COFFEE-2'},
    {id: 3, text:'OPS-COFFEE-3'}
]
$('#id_select2_demo2').select2({
data: sdata
});

select2能够加载的数据格式如上,需要两个数据属性 idtext,当然你也可以加载其他的额外属性以在需要时获取

加载远程数据

除了加载本地数据外,也支持ajax异步去后端获取数据,用法如下:

$('#id_select2_demo3').select2({
    placeholder: 'Ajax后端获取数据示例',
    ajax: {
      url: "sdata.json",
      dataType: 'json',
      delay: 250,
      data: function (params) {
        return {
          search: params.term,
        };
      },
      processResults: function (data) {
        return {
          results: data
        };
      },
      cache: true
    },
    minimumInputLength: 2
});
  • delay: 250: 配置告诉select2在用户停止输入多少毫秒后开始查询,合理设置可以避免频繁向后端发送请求
  • search: params.term: 定义了要传递给后端的查询参数,search 为发送到服务端的参数名,params.term 表示输入框中输入的内容,当然这里也可以添加一些自定义的参数,例如:
data: function (params) {
    return {
      search: params.term,
      site: "https://select2.github.io/select2/"
    };
},

那么当你输入 OPS 时,服务端接受到的完整参数就是 /sdata.json?search=OPS&site=https://select2.github.io/select2/

  • results: data: 定义了后台返回的数据,其中 data 为select2能够识别的格式,如果后端返回的格式不是 Select2 能够识别的格式,例如下边这样
{
    "state": 1, 
    "message":[
        {"id": 0, "text":"-----单选-----"},
        {"id": 1, "text":"OPS-COFFEE-1"},
        {"id": 2, "text":"OPS-COFFEE-2"},
        {"id": 3, "text":"OPS-COFFEE-3"}
    ]
}

那么你需要先将其处理成 Select2 能够识别的格式,这里我们就需要取出 date 中的 message

processResults: function (data) {
    return {
      results: data.message
    };
},
  • minimumInputLength: ajax 异步请求通常我们会配合配置项 minimumInputLength 使用,这个配置项的意思是输入指定长度的字符后开始搜索,也就是点击select选择框默认不会去后台请求数据,当你输入指定长度的字符时才会去搜索,这样在你搜索项非常多的时候能更精确的匹配你想要的内容

如果你想点击即显示所有 option,那么你可以将他的值设置为0,或者不配置这个配置

同时也可以通过 maximumInputLength 配置项配置输入字符的最大长度

多选支持

Select2 对多选的支持也非常简单,跟默认的 Select 标签一样只需要在 Select 标签中添加 multiple="multiple" 即可

<select class="form-control" multiple="multiple">
    <option value="1">OPS-COFFEE-A</option>
    <option value="3">OPS-COFFEE-C</option>
    <option value="4">OPS-COFFEE-D</option>
    <option value="5">OPS-COFFEE-E</option>
</select>
var selectory = $('#id_select2_demo4').select2({
placeholder: '请选择,最多选择三个',
  allowClear: true,
  maximumSelectionLength:3,
});

显示效果如下:

Select2 基于 jQuery 的下拉列表美化插件

  • allowClear: 是否显示清楚按钮,默认 false,如果设置为 true,需要同时配置 placeholder,否则可能会引起js报错:
TypeError: Cannot read property 'id' of undefined
  • maximumSelectionLength: 配置最多能选择多少项

配置说明

另外还有几个配置上边没有讲到的:

  • width: 宽度,例如 100%
  • multiple: 是否支持多选,默认 false
  • closeOnSelect: 是否选中后关闭选择框,默认 true
  • tags: 是否可以动态创建选项
  • disabled: 是否禁用
  • debug: 是否开启 debug 模式

使用进阶

获取已选择的值,无论是单选还是多选都可以用下边的代码来获取选择的option

$('#id_select2_demo4').select2('val')

获取已选择的对象

$("#id_select2_demo4").select2("data")

如果想要拿到已选择option的text值,可以通过如下方法,以下代码中的 [0] 用来获取第一个对象,对单选合适,如果是多选的话需要循环获取

$("#id_select2_demo4").select2("data")[0].text

selected,初始化值,设置选中项

# 单选情况下val为数字,这里的selectx为
$("#id_select2_demo1").val(2).trigger("change");

多选情况下 val 为列表

$("#id_select2_demo4").val([2,3,5]).trigger("change");

清空已选择的值,无论是单选还是多选都可以这样清除

$("#id_select2_demo1").val(null).trigger('change');
$("#id_select2_demo4").val(null).trigger('change');

禁用select2

$("#id_select2_demo1").prop('disabled',true);
$("#id_select2_demo4").prop('disabled',true);

动态添加 select 的 option

$('#add').click(function() {
    var _html = '<option value="9" selected>select2.github.io/select2/</option>';
    $('#id_select2_demo1').append(_html).trigger('change.select2');
    $('#id_select2_demo1').select2("open");
})
  • change.select2: 新增 Select 数据后触发 Select2 更新
  • .select2(“open”): 打开 Select,open 改为 close 可动态关闭 Select,改为 destroy 可销毁 Select2,恢复 Select 默认样式

完整 Demo

为了方便大家学习,我写了个完整的 demo,你可以在线查看效果或下载代码应用到自己的项目中

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2891 文章
评论
84935 人气
更多

推荐作者

伊面

文章 0 评论

白况

文章 0 评论

七禾

文章 0 评论

亢潮

文章 0 评论

悲念泪

文章 0 评论