使用 Select2 代替原生select组件

发布于:2020-08-03 最后编辑:2020-08-03 所属分类:前端 阅读次数:1378

Select2简介

稍微熟悉HTML的童鞋都知道<select>标签是一个很常用标签,可是CSS对它的支持程度比较低,美化起来很困难。而 Select2 可以帮我们实现美化<select>标签的目的。以后浏览器可能会对原生<select>的美化进行支持,不过一时半会儿也普及不了。Select2 的实现原理还是比较简单的,就是获取现有的原生<select>的选项,然后用<div><span><ul><li>等HTML标签组合成一个新的下拉选项,然后隐藏原生的<select>

当然了,Select2的发展已经有些年头了,支持的功能也越来越多,例如多选框等等。。

Select2使用方法

Select2是一款 JQuery插件,使用之前,必须先在页面中引入 JQuery。剩下的工作就跟其他JavaScript插件的用法差不多了,引入Select2的js和css文件之后,进行初始化即可。

初始化代码示例:

$(document).ready(function() {
    $('.js-example-basic-single').select2();
});

参考资料

官方文档
官方仓库
下载地址