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');