hold my hand,假记者敲诈勒索案,化学守城
效果图展示：
实现方式：
前端代码：
我要评论
<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动态获取数据的代码，希望对大家有所帮助
如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复
bootstrap select2 动态从后台Ajax动态获取数据的代码
使用ajax跨域调用springboot框架的api传输文件
不使用XMLHttpRequest对象实现Ajax效果的方法小结
网友评论