整理：select2的使用、事件、参数详解

官方文档（推荐）：

select2参数文档说明

参考博客：

1.使用

Select2下拉框总结

select2使用方法总结

Select2学习总结

老版本select2设置初始值

JS组件系列——Bootstrap Select2组件使用小结

2.事件

jquery插件select2的所有事件，包括清除，删除，打开等

3.参数详解

bootstrap select2 参数详解

select2 api参数的文档

样例（来自官方文档）

$("#e7").select2({
    placeholder: "Search for a repository",
    minimumInputLength: 3,
    ajax: {
        url: "https://api.github.com/search/repositories",
        dataType: 'json',
        quietMillis: 250,
        data: function (term, page) { // page is the one-based page number tracked by Select2
            return {
                q: term, //search term
                page: page // page number
            };
        },
        results: function (data, page) {
            var more = (page * 30) < data.total_count; // whether or not there are more results available
 
            // notice we return the value of more so Select2 knows if more results can be loaded
            return { results: data.items, more: more };
        }
    },
    formatResult: repoFormatResult, // omitted for brevity, see the source of this page
    formatSelection: repoFormatSelection, // omitted for brevity, see the source of this page
    dropdownCssClass: "bigdrop", // apply css that makes the dropdown taller
    escapeMarkup: function (m) { return m; } // we do not want to escape markup since we are displaying html in results
});

常用事件

 // 改变事件
$("#e11").on("change", function(e) {}); 
// select2 打开事件
$("#e11").on("select2-open", function(e) {});  
 // select2 关闭事件   
$("#e11").on("select2-close", function(e) {}); 
 // 选中事件
$("#e11").on("select2-selecting", function(e) {}); 
// 移除完毕事件。配置allowClear: true后触发
$("#e11").on("select2-removed", function(e) {});  
 // 加载中事件
$("#e11").on("select2-loaded", function(e) {}); 
//  获得焦点事件
$("#e11").on("select2-focus", function(e) {});
//  失去焦点事件    
$("#e11").on("select2-blur", function(e) {});     

函数

// 获取选中的ID值
$("#e1").select2("val"));
// id="CA" 选中（好像单个还不行，以数组形式才行）
$("#e2").select2("val", "CA");
// 不选中任何值
$("#e2").select2("val", "");
// 获取选中的对象
$("#e2").select2("data");
//设置选中的值：id="CA",text="California"
$("#e2").select2("data", {id: "CA", text: "California"});
// 获取选中JSON对象
JSON.stringify($("#e2").select2("data")));
//多选设值
$("#e2").select2("data", [{id: "CA", text: "California"},{id:"MA", text: "Massachusetts"}]);

参数

templateResult : formatState, // 列表带图片
templateSelection : formatState, // 选中的带图片

language: "zh-CN", //设置 提示语言
width: "100%", //设置下拉框的宽度
placeholder: "请选择", // 空值提示内容，选项值为 null
//placeholder: {id: '', text: "请选择"}, // 同上，这里默认空值为 ''
minimumInputLength: 10,  //最小需要输入多少个字符才进行查询
maximumInputLength:11, //最大输入长度
allowClear: true, //是否允许手动点击删除
tags: false,  // 根据搜索框创建option，默认false
selectOnClose: true, // 如果没有手动选中，下拉框消失后会自动选中被hover的选项 （不建议使用）
closeOnSelect: false, // 选择后下拉框不会关闭（单选-不建议使用）
minimumResultsForSearch: Infinity, // 隐藏搜索框
theme: "classic", // 样式
separator: ",",// 分隔符  
data: initdata,// 下拉框绑定的数据
multiple: true,// 多选，默认false

maximumSelectionLength: 3,  // 多选 - 设置最多可以选择多少项
tokenSeparators: [',', ' '], // 多选 - 输入逗号和空格会自动完成一个选项 前提是：tags: true

//加载远程数据参数
escapeMarkup: function (markup) { return markup; }, //template的html显示效果，否则输出代码
formatResult:repoFormatResult,// 自定义下拉选项的样式模板。返回结果回调function repoFormatResult(repo){return repo.text},这样就可以将返回结果的的text显示到下拉框里。也可以自定义返回结果样式
formatSelection:repoFormatSelectionl // 自定义选中选项的样式模板。选中项回调function repoFormatSelection(repo){return repo.text}

旧版本设置初始值： 

//设置初始值
initSelection:function(element, callback) {
	var initData = {id:'', text:'默认值'}
	callback(initData);
},

样例补充

var selectCustomer;
$(function(){
	initSelectCustomer();
});
function initSelectCustomer(){
	$("#e2").select2({
	    ajax: {
	        url: "<%=request.getContextPath()%>/electric/customer/autocomplete",
	        dataType: 'json',
	        quietMillis: 500,
	        data: function (term, page) {
	            return {
	                mobilePhone: term,
	            };
	        },
	        results: function (data, page) {
	        	//console.log(data);
	        	var list = new Array();
	        	if(data && data.length >0 ){
		        	$.each(data, function (i,e) {
		        		var obj = {};
		     		   	obj.id = e.id;
		     		   	obj.text = e.mobilePhone;
		     		 	obj.username = e.name;
		     		 	list.push(obj);
		     		});
	        	}
	     		//console.log(list);
	            return { results: list};
	       },
	       cache:true
	    },
	    initSelection:function(element, callback) {
	        if (!selectCustomer) {
	        	selectCustomer = {id:'${account.customer.id}', text:'${account.customer.mobilePhone}'};
		    	//console.log("customer:id="+selectCustomer.id+",phone="+selectCustomer.text);
	        }
	        callback(selectCustomer);
	    },
	    placeholder: "输入手机号码",
	    language:'zh-CN',//语言
	    maximumInputLength:11,//最大输入长度
	    minimumInputLength:4,//最小输入长度
	    width: 'resolve',
	    allowClear: true,    //选中之后，可手动点击删除
        dropdownCssClass: "bigdrop",
        escapeMarkup: function (m) {return m;},
	    formatResult:repoFormatResult,// 自定义下拉选项的样式模板
	    formatSelection:repoFormatSelection // 自定义选中选项的样式模板
	});
	$("#e2").on("select2-close", function (e) {
		//关闭下拉框事件。获取选中的对象
		selectCustomer = $("#e2").select2("data");
		//console.log("customer:id="+selectCustomer.id+",phone="+selectCustomer.text);
	}); 
	$("#e2").on("select2-removed", function (e) {
	    //这里是取消选中触发的事件，配置allowClear: true后触发
		$("#e2").val('');
		$("#mobilePhone").val('');
		//console.log("移除完毕。");
	});
}
function repoFormatResult(repo) {
	//console.log("repo:"+repo);
	var markup = '<div class="row-fluid">' +
      '<div class="span10">' +
         '<div class="row-fluid">' +
            '<input type="hidden" value='+repo.id+'>'+
            '<div class="span3">' + repo.text + '</div>' +
         '</div>';
   markup += '</div></div>';
   return markup;
}

function repoFormatSelection(repo) {
	//console.log("format:"+repo.id+",text:"+repo.text);
	$("#e2").val(repo.id);
	$("#mobilePhone").val(repo.text);
    return repo.text;
}