Select2 的简单使用

2019独角兽企业重金招聘Python工程师标准>>>

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

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

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

1. css文件：select2.css 

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

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

   注意：

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

   2. 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 咱们畅聊

转载于:https://my.oschina.net/shichangcheng/blog/350275