select2
一、单选
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
