select2组件-一款功能强大的jquery表单处理插件

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

发表评论

电子邮件地址不会被公开。 必填项已用*标注