select2学习笔记

功能强大的select2插件可以在一定程度节省美化下拉框的时间，同时它还支持多选，异步模糊查询等一系列功能

1.简单用法

前台页面正常书写即可，你可以写死也可以用el表达式等语句放入下拉选项

<select id="select2">    <option></option></select>

在js文件中使用select2()方法初始化，参数为下拉框的配置对象，也可不写直接用

$('#select2').select2({     ......     ......});

2.异步获取远程数据

在现在的项目中由于选项太多并要支持多选我选择了用select2的异步使用方法
前台页面写一个空下拉框即可

<select id="ajax-select2"></select>

重点在js中我们要完成插件的初始化

$('.ajax-select2').select2({              ajax: {                url: "获取后台json数据的地址",                dataType: 'json',                delay: 250,                data: function (params) {                  return {                    hint : params.term, //输入的字符，也就是传递给后台的参数                  };                },                processResults: function (data, page) {                    return {results:jQuery.parseJSON(data)};//得到json数组解析成js对象                },                cache: true              },              maximumSelectionLength: 2,//最多能选择几个选项              minimumInputLength: 1,//输入几个字符数开始查询              multiple:true,//                tags: true,              templateResult: formatRepoCN,//拿到的数据通过这个方法来设置怎么显示              templateSelection: formatRepoSelectionCN //选择数据后怎样显示在框里            });      function formatRepo(repo) {              var markup =  repo.id + repo.text;  //select2接收的json数组中每一项必须包含id和text，它们          return markup;                      //对应option的value和text      }      function formatRepoSelection(repo) {                return repo.text;          } 

有些时候我们不只要选择还要回显，我是这样做的:
在上面的基础上加两个属性来存储后台发过来的值

<select id="ajax-select2" selectValue="${XXX}" selectText="${XXX}"></select>

在js文件中把这段代码放在初始化之后：

var selectValue = $('ajax-select2').attr('selectValue');var selectText = $('ajax-select2').attr('selectText');//触发下拉框改变事件selet2才能检测到被选项$('ajax-select2').applend('<option value="'+selectValue+'" selected>'+selectText+'</option>').trigger('change');