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

效果图展示:

实现方式:

前端代码:

动态多选

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

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动态获取数据的代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!

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

参与评论 您还未登录,请先 登录 后发表或查看评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:1024 设计师:我叫白小胖 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值