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

 更新时间:2019年12月13日 09:52:59   作者:秦岭熊猫  
这篇文章主要介绍了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动态获取数据的代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

相关文章

  • json获取数据库的信息在前端页面显示方法

    json获取数据库的信息在前端页面显示方法

    今天小编就为大家分享一篇json获取数据库的信息在前端页面显示方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-05-05
  • Jquery中$.ajax()方法参数详解

    Jquery中$.ajax()方法参数详解

    本文是小编日常整理些有关jquery ajax()参数详解,由于jquery ajax方法参数比较多,靠大脑记住有点犯难,下面小编把内容整理分享到脚本之家网站,供大家参考
    2015-10-10
  • 用Ajax来控制书签和回退按钮的代码

    用Ajax来控制书签和回退按钮的代码

    用Ajax来控制书签和回退按钮的代码
    2007-01-01
  • AJAX实现省市县三级联动效果

    AJAX实现省市县三级联动效果

    这篇文章主要为大家详细介绍了AJAX实现省市县三级联动效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-10-10
  • 关于ajax网络请求的封装实例

    关于ajax网络请求的封装实例

    下面小编就为大家带来一篇关于ajax网络请求的封装实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-07-07
  • 通过Ajax方式绑定select选项数据的实例

    通过Ajax方式绑定select选项数据的实例

    今天小编就为大家分享一篇通过Ajax方式绑定select选项数据的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • ECSHOP中实现ajax弹窗登录功能

    ECSHOP中实现ajax弹窗登录功能

    本文主要给大家介绍在ecshop中实现ajax弹窗登录功能,代码简单易懂,非常不错,具有参考借鉴价值,需要的的朋友参考下
    2017-03-03
  • HTTP报文及ajax基础知识

    HTTP报文及ajax基础知识

    客户端传递给服务器的内容 和 服务器传递给客户端的内容 都属于HTTP报文。Ajax是客户端JS中的方法,用来向服务端发送请求,下面通过本文给大家分享HTTP报文及ajax基础知识,感兴趣的朋友一起看看吧
    2017-08-08
  • ASP.NET与Ajax的实现方式小总结

    ASP.NET与Ajax的实现方式小总结

    Ajax 应该不是一项技术,是一种思想而已,跟 ASP.NET 以及其它 Web 开发语言没有什么太大关系,这里只是谈谈 ASP.NET 中目前使用的 Ajax 技术以及其它一些实现 Ajax 的优秀框架。感兴趣的朋友跟着小编一起学习asp.net与ajax的实现方式
    2015-09-09
  • Ajax二级联动菜单实现原理及代码

    Ajax二级联动菜单实现原理及代码

    二级联动菜单,一个多么方便且实用的用户交互功能,有需求的朋友可以参考下本文,或许对你的菜单知识深入学习有帮助,好了,闲话不多说,看代码吧
    2013-01-01

最新评论