select2

一、单选

1.固定数据：

　　1.1框

<input id="carTypeSel" style=" 100px;" >

//导入js包
<script src="select2/select2.min.js"></script>
<script src="select2/pinyin.js"></script>

　1.2js代码：

        var arr=[];
        var a1={};
         a1.id='aa';
         a1.chexing='A型车';
        var a2={};
         a2.id='bb';
         a2.chexing='B型车';
        var a3={};
         a3.id='cc';
         a3.chexing='C型车';
        arr.push(a1);
        arr.push(a2);
        arr.push(a3);
         $("#carTypeSel").select2({
          data: arr
        });


 1             ///车型下拉改变事件///
 2             $('#carTypeSel').on('change', function (e) {
 3                     if(e.added){//选中
 4                         alert(e.added.chexing);//车型
 5                         alert(e.added.id);//id
 6                     }else{//清除
 7                         alert(e.removed.chexing);//车型
 8                         alert(e.added.id);//id
 9                     }
10             });


1　　　　　　　　var chexing=$('#carTypeSel').select2('data').chexing;//获取车型

1　　　　　　　　$("#carType").select2('data',{chexing:'F型车'});//赋默认值

效果：（使用成功，因为工作数据不可公开，所以PS了文字。）

2.动态加载数据：

　　2.1框和js文件

<input id="carTypeSel" style=" 100px;" >

<script src="select2/select2.min.js"></script>
<script src="select2/pinyin.js"></script>

　　2.2.js代码

            ///车型下拉加载///
            $('#carTypeSel').select2({
                 placeholder: "请选择",
                 allowClear: true,
                 ajax: {
                     url: "/xxx/getCar",
                     dataType: 'json',
                     quietMillis: 250,
                     data: function(term, page) {
                         return {
                             queryParam: term
                         }; // search term
                     },
                     results: function(data, page) {
                         return {
                             results: data
                         };
                     },
                     cache: true
                 },
                 formatSelection: function(item) {
                     return item.chexing;
                 },
                 // 选择结果中的显示
                 formatResult: function(item) {
                     return item.chexing;
                 },
                 // 搜索列表中的显示
                 escapeMarkup: function(m) {
                     return m;
                 },
             });
　　　　　　

 1             ///车型下拉改变事件///
 2             $('#carTypeSel').on('change', function (e) {
 3                     if(e.added){//选中
 4                         alert(e.added.chexing);//车型
 5                         alert(e.added.id);//id
 6                     }else{//清除
 7                         alert(e.removed.chexing);//车型
 8                         alert(e.added.id);//id
 9                     }
10             });

1　　　　　　　　var chexing=$('#carTypeSel').select2('data').chexing;//获取车型

1　　　　　　　　$("#carType").select2('data',{chexing:'F型车'});//赋默认值

　　2.2.后台

    @RequestMapping(value = "/getCar", method = RequestMethod.GET)
    @ResponseBody
    public List<Car> getCxJcsj(String queryParam) {
        List<Car> userList = null;
        HashMap<String, String> map = new HashMap<String, String>();
        map.put("chexing", queryParam);
        userList = jcdaService.getCxJcsj(map);
        return userList;
    }

//.....此外略去service层

    <select id="getCar" resultMap="carMap" parameterType="hashmap">
        select chexing from Cars where 1=1
        <if test="chexing !=null and chexing!=''">
            and chexing like '%'||#{chexing}||'%'
        </if>
        group by chexing 
    </select>

二、多选

1.固定数据：

　　1.1框

 <input id="yearSel" style=" 100px;" >
 
 <script src="select2/select2.min.js"></script>
 <script src="select2/pinyin.js"></script>

　　1.2js代码

         var arr=[];
         var a1={};
           a1.id='0';
           a1.value='2006';
         var a2={};
          a2.id='1';
          a2.value='2007';
         var a3={};
          a3.id='2017';
          a3.value='2017';
         arr.push(a1);
         arr.push(a2);
         arr.push(a3);
        $("#yearSel").select2({
           data: arr,
16　　　　　　　multiple: true
           });

 1             ///车型下拉改变事件///
 2             $('#yearSel').on('change', function (e) {
 3                     if(e.added){//选中
 4                         alert(e.added.value);
 5                         alert(e.added.id);
 6                     }else{//清除
 7                         alert(e.removed.chexing);
 8                         alert(e.added.id);
 9                     }
10             });

1　　　　　　　　var yearSel=$("#c01-select").select2("data"); //得到多个数据

1　　　　　　　　$("#yearSel").val(['0','2017']).trigger('change');//赋默认值,2006年和2017年被选中，会触发change事件

　

2.动态数据：

　　2.1框

　　同上，只多了一个属性multiple: true