select2-CSDN博客

一、单选

1.固定数据：

　　1.1框

1 <input id="carTypeSel" style="width: 100px;" >
2 
3 //导入js包
4 <script src="select2/select2.min.js"></script>
5 <script src="select2/pinyin.js"></script>

　1.2js代码：

 1         var arr=[];
 2         var a1={};
 3          a1.id='aa';
 4          a1.chexing='A型车';
 5         var a2={};
 6          a2.id='bb';
 7          a2.chexing='B型车';
 8         var a3={};
 9          a3.id='cc';
10          a3.chexing='C型车';
11         arr.push(a1);
12         arr.push(a2);
13         arr.push(a3);
14          $("#carTypeSel").select2({
15           data: arr
16         });


 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文件

1 <input id="carTypeSel" style="width: 100px;" >
2 
3 <script src="select2/select2.min.js"></script>
4 <script src="select2/pinyin.js"></script>

　　2.2.js代码

 1             ///车型下拉加载///
 2             $('#carTypeSel').select2({
 3                  placeholder: "请选择",
 4                  allowClear: true,
 5                  ajax: {
 6                      url: "/xxx/getCar",
 7                      dataType: 'json',
 8                      quietMillis: 250,
 9                      data: function(term, page) {
10                          return {
11                              queryParam: term
12                          }; // search term
13                      },
14                      results: function(data, page) {
15                          return {
16                              results: data
17                          };
18                      },
19                      cache: true
20                  },
21                  formatSelection: function(item) {
22                      return item.chexing;
23                  },
24                  // 选择结果中的显示
25                  formatResult: function(item) {
26                      return item.chexing;
27                  },
28                  // 搜索列表中的显示
29                  escapeMarkup: function(m) {
30                      return m;
31                  },
32              });

 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.后台

 1     @RequestMapping(value = "/getCar", method = RequestMethod.GET)
 2     @ResponseBody
 3     public List<Car> getCxJcsj(String queryParam) {
 4         List<Car> userList = null;
 5         HashMap<String, String> map = new HashMap<String, String>();
 6         map.put("chexing", queryParam);
 7         userList = jcdaService.getCxJcsj(map);
 8         return userList;
 9     }
10 
11 //.....此外略去service层
12 
13     <select id="getCar" resultMap="carMap" parameterType="hashmap">
14         select chexing from Cars where 1=1
15         <if test="chexing !=null and chexing!=''">
16             and chexing like '%'||#{chexing}||'%'
17         </if>
18         group by chexing 
19     </select>

二、多选

1.固定数据：

　　1.1框

1  <input id="yearSel" style="width: 100px;" >
2  
3  <script src="select2/select2.min.js"></script>
4  <script src="select2/pinyin.js"></script>

　　1.2js代码

 1          var arr=[];
 2          var a1={};
 3            a1.id='0';
 4            a1.value='2006';
 5          var a2={};
 6           a2.id='1';
 7           a2.value='2007';
 8          var a3={};
 9           a3.id='2017';
10           a3.value='2017';
11          arr.push(a1);
12          arr.push(a2);
13          arr.push(a3);
14         $("#yearSel").select2({
15            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

转载于:https://www.cnblogs.com/janesyf/p/8026519.html