select2各参数的设置相关笔记

一、初始化，实现中文提示显示

 首先必须要引入中文包，且一定要放在select2.js之后

<link type="text/css" rel="stylesheet" href="/css/select2.css">

<script type="text/javascript" src="/js/select2.full.min.js"></script>	
<script type="text/javascript" src="/js/i18n/zh-CN.js"></script></span>

$(".selectProduct").select2({
		ajax: 
		{
			url: "getProducts",
			dataType: 'json',
			type: 'POST',
			delay: 250,
			data: function (params) 
			{
				var param = new Object();
				param.name = params.term;						
				return param;
			},
			processResults: function (resp, page) 
			{
				var array = new Array();
				if (resp.products)
				{
					for (var i = 0; i < resp.products.length; i++)
					{
						var product = resp.products[i];
						array.push({id:product.productId, text: product.productName});
					}
				}
				var ret = new Object();
				ret.results = array;				
				return ret;
			},
			cache: true
		},
		minimumInputLength: 2,
		language: "zh-CN",
	});	</span>

二、select2常用的属性：

var  itemList = [{id:1,text:'测试1'}{}{}{{}{}{}{}];//类似的json数组格式

三、加载本地数据：

       select2默认的数据属性是id、text，新版本可以自定义，但还是用默认的比较好。所以提供的json中最好转换为id、text形式，当然可以添加其他属性。

var data = [{ id: 0, text: 'enhancement' }, { id: 1, text: 'bug' }, { id: 2, text: 'duplicate' }, { id: 3, text: 'invalid' }, { id: 4, text: 'wontfix' }];
$("#c01-select").select2({
  data: data,
  placeholder:'请选择',
  allowClear:true
})

四、加载远程数据

$("#c01-select").select2({
  ajax: {
    url: "data.json",
    dataType: 'json',
    delay: 250,
    data: function (params) {
      return {
        q: params.term,
      };
    },
    processResults: function (data) {
      return {
        results: data
      };
    },
    cache: true
  },
  escapeMarkup: function (markup) { return markup; }, 
  minimumInputLength: 1,
  templateResult: formatRepo, 
  templateSelection: formatRepoSelection 
});

说明：

     1.q: params.term 查询参数（params.term表示输入框中内容，q发生到服务器的参数名；所以这里你可以添加自定义参数，如：stype:'person'）

     2.processResults中results: data返回数据（返回最终数据给results，如果我的数据在data.res下，则返回data.res。这个与服务器返回json有关）

     3.minimumInputLength 最小需要输入多少个字符才进行查询，与之相关的maximumSelectionLength表示最大输入限制。

     4.escapeMarkup字符转义处理

     5.templateResult返回结果回调function formatRepo(repo){return repo.text},这样就可以将返回结果的的text显示到下拉框里，当然你可以return repo.text+"1";等

     6.templateSelection选中项回调function formatRepoSelection(repo){return repo.text}

     7.关于返回的 json的格式：select2默认json格式为[{id:1,text:'text'},{id:2,text:'text'}]，新版严格要求这样的格式，当然你可以添加列，如：[{id:1,text:'text',name:'liu'}]

五、获取选中项

var res=$("#c01-select").select2("data")[0] ; //单选
var reslist=$("#c01-select").select2("data");    //多选
if(res==undefined)
{
     alert("你没有选中任何项");
}
if(reslist.length)
{
     alert("你选中任何项");
}

六、清空选择项和设置不可用

//清空选择
$("#c01-select").val(null).trigger("change");
$("#c01-select").val("你的placeholder").trigger("change");//或者
//如果你使用的是input标签（默认就是本地数据），你可以用$("#c01-select").val('');来清空选项
//disabled
$("#c01-select").prop("disabled", false);//可用
$("#c01-select").prop("disabled", true);//不可用

七、启用多选

$("#c01-select").select2({
  data:data,
  multiple: true
});

八、新老版本对比

 

 

注意事项：

       版本的select2如果引用的jquery版本较低的话，某些功能无法正常使用。比如：清除功能allowClear: true

       最新版本请使用<select></select>标签（对于本地化的数据你可以使用input，但ajax远程数据必须使用select）

相关网站：

http://select2.github.io/select2/

https://www.cnblogs.com/liuxiaobo93/p/5112993.html