Select2 的简单使用

摘要: 满足任何要求的下拉框
新手使用select2 需要注意的情况

前段时间 公司要求将项目中的下拉框度做修改，为了满足公司的要去，我最终找到了select2 这个js插件；

1. select2 下载地址 http://ivaynberg.github.io/select2/

2. 下载完成后 自己新建一个文件夹 将所需要的 select2中的资源复制出来；

css文件：select2.css

js文件：select2.js/select2.min.js jquery-1.11.1.min.js【自己下载的】，select2_locale_zh-CN.js【语言js】

css中的图片：select2.png select2-spinner.gif select2x2.png
注意：

css中引用图片的位置为当前目录，所以css的图片最好和css文件同级，若不行你则需要去修改 css文件；

select2.js 是借助于 jquery.js 进行开发的所以在引入 select.js之前要引入jquery.js 最好版本高点，我用的是1.11

3.新建一个html 并引入相应的js和css

<link rel="stylesheet" type="text/css" href="./select2.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="./select2.js"></script>
<script type="text/javascript" src="./select2_locale_zh-CN.js"></script>

4.简单使用：

本人建议的使用方法为：

$("#"+id).select2({
id:'dm',	//可选参数，若你的data中没有一个 名字为 ‘id’的字段那你就需要在这儿设置 就是<option>中value
data:{
results: data,
text: function(item) {
return item.mc;
}
},
formatSelection: format,
formatResult: format
});
function format(item){
return item.mc;//可以写 item所拥有的字段或者多个字段组合
}

若你的数据为固定数据基本不会发生变化，比如国家，地区等，那么我建议你将数据查出来放到一个array中，这样查询速度和条件查询度是比较快的，若你的数据需要通过ajax请求，那么请参考官网，也需要主要注意一下id这个参数，若有问题我们可以一起探讨。

5. 关于下拉框层级的问题：

1.若你使用了 layer.js 这个弹出框插件，那么你在弹出页面中使用 select2 会发现下拉框无法显示？

解决方法：这个可能造成的原因是 select2的层级不够，到select.css中找到3个z-index，并根据他们现有的层级关系，适当的增加 z-index的值；

修改前的：

.select2-drop-mask {
......
z-index: 9998;
......
}

.select2-drop {
.......
z-index: 9999;
.........
}
.select2-search {
.....
z-index: 10000;
.......
}

我根据我需要修改成

.select2-drop-mask {
......
z-index: 19911124;
......
}

.select2-drop {
.......
z-index: 19999999;
.........
}
.select2-search {
.....
z-index: 19911126;
.......
}

在本次项目中我主要遇到的两个问题就是：

z-index

一个 id，若id不正确会造成 下拉框中的内容无法选中

谢谢大家阅读这篇文章，若有更好更多的使用心得或者问题，请在文章下方留言，或者加 983561865 咱们畅聊