select2是一款很好用的jquery插件。功能貌似很多很强大。这里我只简单介绍我使用它最基础的功能-在select标签中搜索options。
有这样一个需求:在<select>标签中有非常多的<option>,如果我们想找到自己需要的某个选项,是非常耗时的。select2插件提供一个简单的可以搜索的功能,如下图
这样我们直接搜索自己的选项,就会非常方便。
下面介绍下具体如何引入select2插件,以及启用:
1.在文件中引入select2的js和css资源
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
上面是他的CDN远程库,也可以下载到本地引用,可以点击这里下载 SELECT2资源下载
2.启用它很简单
<select class="js-example-basic-single" name="state"> <option value="AL">Alabama</option> ... <option value="WY">Wyoming</option> </select> $(document).ready(function() { $('.js-example-basic-single').select2(); });
这样就可以了。
当然这是select2插件最简单的应用实例,更多方法可以参考select2官方说明
select2官网 https://select2.org/
其他作者介绍 http://www.cnblogs.com/wuhuacong/p/4761637.html