bootstrap select2 动态从后台Ajax动态获取数据的代码

效果图展示：

实现方式：

前端代码：

1. <div class="form-group">
2. <label class="font-noraml">动态多选</label>
3. <select id="bsselect2ID" name="bsselect2ID" class="form-control select2-multiple"
4. type="text" multiple data-live-search="true" >
5. </select>
6. </div>
7.  
8. .....
9. <script th:inline="javascript">
10. var url = ctx + "demo/form/select2";
11. console.log(url)
12. $(function() {
13. var selectedValues = [];
14. $("#bsselect2ID:selected").each(function(){
15. selectedValues.push($(this).val());
16. });
17.  
18. $("#bsselect2ID").selectpicker({
19. noneSelectedText : '请选择' , //默认显示内容
20. //placeholder:'请选择',//默认文字提示
21. // {#tags: true,//允许手动添加 #}
22. allowClear: true,//允许清空
23. });
24. loadnetdatas2();
25. loadnetdatabs2(); //执行此函数，从后台获取数据，拼接成option标签，添加到select的里面
26.  
27. //初始化刷新数据
28. $(window).on('load', function() {
29. $('#bsselect2ID').selectpicker('val', '');
30. $('#bsselect2ID').selectpicker('refresh');
31. });
32.  
33. });
34. //var category = $.trim($('#select2ID option:selected').val());
35. function loadnetdatabs2(){
36. $.ajax({
37. url : url, //后台controller中的请求路径
38. type : 'GET',
39. async : false,
40. datatype : 'json',
41. success : function(results) {
42. if(results){
43. var jsondata=results.data;
44. //console.log(jsondata)
45. var netnames =[];
46. console.log(jsondata.length)
47. for(var i=0,len=jsondata.length;i<len;i++){
48. var netdata = jsondata[i];
49. console.log(netdata)
50. 　　　　　　　　　　　　　　　//拼接成多个<option><option/>
51. 　　　　　　　　　　　　　　　netnames.push('<option value="'+netdata.userId+'">'
52. +netdata.userName+'</option>')
53. }
54. $("#bsselect2ID").html(netnames.join(''));
55. //根据netID(根据你自己的ID写)填充到select标签中
56. $('#bsselect2ID').selectpicker('val', '');
57. $('#bsselect2ID').selectpicker('refresh');
58. }
59. },
60. error : function() {
61. alert('查询出错');
62. }
63. });
64. };
65. </script>

后端实现代码：

1. /**
2. * 动态获取下拉框内容下拉框
3. */
4. @GetMapping("/select2")
5. @ResponseBody
6. public Map<String,Object> selectDynamic()
7. {
8. Map<String,Object> infoMap=new HashMap<>();
9. List<UsersModel> infoLists=new ArrayList<>();
10. System.out.println("开始选择...");
11. for(UserFormModel user:users) {
12. UsersModel userModel=new UsersModel();
13. userModel.setUserId(user.getUserId());
14. userModel.setUserName(user.getUserName());
15. infoLists.add(userModel);
16. }
17. infoMap.put("data", infoLists);
18. return infoMap;
19. }

总结

以上所述是小编给大家介绍的bootstrap select2 动态从后台Ajax动态获取数据的代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！