• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    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;ilen;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 MapString,Object> selectDynamic()
      {
       MapString,Object> infoMap=new HashMap>();
       ListUsersModel> 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动态获取数据的代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
    如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

    您可能感兴趣的文章:
    • bootstrap select2插件用ajax来获取和显示数据的实例
    • 基于Bootstrap下拉框插件bootstrap-select使用方法详解
    • bootstrap中selectpicker下拉框使用方法实例
    • bootstrap jquery dataTable 异步ajax刷新表格数据的实现方法
    上一篇:Ajax实现二级联动菜单
    下一篇:使用ajax跨域调用springboot框架的api传输文件
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

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