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

这篇文章主要介绍了bootstrap select2 动态从后台Ajax动态获取数据的代码,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下

效果图展示:

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

实现方式:

前端代码:


<select id="bsselect2ID" name="bsselect2ID" class="form-control select2-multiple"
type=”text” multiple data-live-search=”true” >

…..

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)
               //拼接成多个
               netnames.push(”
+netdata.userName+”)
}
$(“#bsselect2ID”).html(netnames.join(”));
//根据netID(根据你自己的ID写)填充到select标签中
$(‘#bsselect2ID’).selectpicker(‘val’, ”);
$(‘#bsselect2ID’).selectpicker(‘refresh’);
}
},
error : function() {
alert(‘查询出错’);
}
});
};

后端实现代码:

/**
* 动态获取下拉框内容下拉框
*/
@GetMapping(“/select2”)
@ResponseBody
public Map selectDynamic()
{
Map infoMap=new HashMap();
List 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动态获取数据的代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

来源:脚本之家

链接:https://www.jb51.net/article/176319.htm

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:SEO优化专员,转转请注明出处:https://www.chuangxiangniao.com/p/897219.html

(0)
上一篇 2025年1月4日 00:54:35
下一篇 2025年1月4日 00:55:13

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • Ajax工作原理及优缺点实例解析

    这篇文章主要介绍了Ajax工作原理及优缺点实例解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 1.Ajax是什么? 全称是 asynchronous javascript and xm…

    2025年1月4日
    100
  • ajax实现excel报表导出

    利用ajax实现excel报表导出【解决乱码问题】,供大家参考,具体内容如下 背景 项目中遇到一个场景,要导出一个excel报表。由于需要token验证,所以不能用a标签;由于页面复杂,所以不能使用表单提交。初步考虑前端使用ajax,后端返…

    编程技术 2025年1月4日
    100
  • ajax实现简单登录页面

    这篇文章主要为大家详细介绍了ajax实现简单登录页面,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 本文实例为大家分享了ajax实现简单登录页面的具体代码,供大家参考,具体内容如下 一.什么是ajax Aja…

    编程技术 2025年1月4日
    100
  • AJAX实现数据的增删改查操作详解java后台

    这篇文章主要介绍了AJAX实现数据的增删改查操作,结合实例形式详细分析了ajax结合java后台实现数据库增删改查相关操作技巧,需要的朋友可以参考下 本文实例讲述了AJAX实现数据的增删改查操作。分享给大家供大家参考,具体如下: 主页:in…

    2025年1月4日
    100
  • 编写高质量代码的30条黄金守则(首选隐式类型转换)

    这篇文章主要介绍了编写高质量代码的30条黄金守则(首选隐式类型转换),本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下。 编写高质量代码的30条黄金守则-Day 01(首选隐式类型转换),…

    2025年1月4日
    100
  • vscode一键规范代码格式的实现

    这篇文章主要介绍了vscode 一键规范代码格式的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。 使用vscode的过程中 自己或者push代码以后 代码的格式可…

    2025年1月4日
    100
  • IDEA中使用Git拉取代码时报 Git pull failed原因及解决方法

    这篇文章主要介绍了IDEA中使用Git拉取代码时报 Git pull failed原因及解决方法,本文给大家介绍的非常详细对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下。 产生原因: 先说一下Git和SVN的区别吧,有助于更…

    2025年1月4日 编程技术
    100
  • VS2019中Git源代码管理实现总结

    这篇文章主要介绍了VS2019中Git源代码管理实现总结,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。 一、将VS2019中已有的项目与远程库进行连接 0.GitHu…

    2025年1月4日 编程技术
    100
  • ajax异步实现文件分片上传实例代码

    这篇文章主要给大家介绍了关于ajax异步实现文件分片上传的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧 前言 使用Ajax上传文件的应用场景颇多,比如上传用户…

    编程技术 2025年1月4日
    100
  • Ajax实现登录案例

    这篇文章主要为大家详细介绍了Ajax实现登录案例,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 Ajax登录案例,供大家参考,具体内容如下 Msg package com.lbl.msg; public cl…

    2025年1月4日
    100

发表回复

登录后才能评论

联系我们

156-6553-5169

在线咨询: QQ交谈

邮件:253000106@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息

联系微信