Select2下拉框总结

用了这么久的Select2插件，也该写篇文章总结总结。当初感觉Select2不是特别好用，但又找不到比它更好的下拉框插件。

在我的印象里Select2有2个版本，最新版本有一些新的特性，并且更新了一下方法参数，比最初版本要好看一些，本文针对新版本。

官网：http://select2.github.io/

演示：

由于博客系统的原因，所以只能演示简单的功能。

一.文件需要引入select2.full.js、select2.min.css（4.0.1版本）和jquery.1.11.1

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

最新版本请使用<select></select>标签

二.placeholder

placeholder占位提示文字，如果需要清楚功能，则必须设置placeholder。

三.加载本地数据

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发生到服务器的参数名）

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");//或者  //disabled  $("#c01-select").prop("disabled", false);//可用  $("#c01-select").prop("disabled", true);//不可用

七.启用多选

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

多选演示：

由于博客系统原因只能演示选择

八.再次强调本文介绍的是select2新版本使用，更多的功能可以到官网查阅。下面简单说明新版与老版差别

结果回调和选中回调名称：formatResult、formatSelection（老版）；templateResult、templateSelection（新版）

初始化：initSelection（老版）；dataAdapter（新版）

获取或设置值：select2("val")（老版）； $ ( "select" ). val ( )（新版）

停用或启用：$("select").enable(false);（老版）； $ ( "select" ). prop ( "disabled" , true );（新版）