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

效果图展示:

实现方式:

前端代码:

<div class="form-group">
 <label class="font-noraml">动态多选</label> 
 <select id="bsselect2id" name="bsselect2id" class="form-control select2-multiple" 
  type="text" multiple data-live-search="true" >
 </select>
</div>
 
.....
<script th:inline="javascript">
 var url = ctx + "demo/form/select2";
 console.log(url)
 $(function() {
  var selectedvalues = [];   
   $("#bsselect2id:selected").each(function(){ 
   selectedvalues.push($(this).val());  
   }); 
   
    $("#bsselect2id").selectpicker({
      noneselectedtext : '请选择' ,  //默认显示内容
      //placeholder:'请选择',//默认文字提示
      // {#tags: true,//允许手动添加 #}
      allowclear: true,//允许清空
    });
    loadnetdatas2();
    loadnetdatabs2();  //执行此函数,从后台获取数据,拼接成option标签,添加到select的里面
    
    //初始化刷新数据
    $(window).on('load', function() {
     $('#bsselect2id').selectpicker('val', ''); 
      $('#bsselect2id').selectpicker('refresh');
    });
 
  });
 //var category = $.trim($('#select2id option:selected').val());
 function loadnetdatabs2(){
      $.ajax({
        url : url,  //后台controller中的请求路径
        type : 'get',
        async : false,
        datatype : 'json',
        success : function(results) {
          if(results){
           var jsondata=results.data;
           //console.log(jsondata)
            var netnames =[];
            console.log(jsondata.length)
            for(var i=0,len=jsondata.length;i<len;i++){
              var netdata = jsondata[i];
              console.log(netdata)
                //拼接成多个<option><option/>
                netnames.push('<option value="'+netdata.userid+'">'
      +netdata.username+'</option>') 
            }
            $("#bsselect2id").html(netnames.join(''));  
            //根据netid(根据你自己的id写)填充到select标签中
            $('#bsselect2id').selectpicker('val', ''); 
            $('#bsselect2id').selectpicker('refresh');  
          }
        },
        error : function() {
          alert('查询出错');
        }
      });
    };
 </script>

后端实现代码:

 /**
   * 动态获取下拉框内容下拉框
   */
  @getmapping("/select2")
  @responsebody
  public map<string,object> selectdynamic()
  {
   map<string,object> infomap=new hashmap<>();
   list<usersmodel> infolists=new arraylist<>();
   system.out.println("开始选择...");
   for(userformmodel user:users) {
   usersmodel usermodel=new usersmodel();
   usermodel.setuserid(user.getuserid());
   usermodel.setusername(user.getusername());
   infolists.add(usermodel);
   }
   infomap.put("data", infolists);
   return infomap;
  }

总结

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

相关文章