bootstrap select2 动态从后台Ajax动态获取数据的代码（bootstrap select 多选）这样也行？

文章摘要

文章介绍了如何使用select2库实现动态多选下拉框功能，并结合JavaScript和jQuery技术进行数据动态加载。文章重点描述了如何通过异步 AJAX请求从后端获取数据，并将其拼接为option标签插入到select元素中。实现了多选下拉框的刷新功能，解决了静态多选框无法灵活更新数据的问题。通过select2的selectpicker插件，实现了用户点击刷新后，从后端快速加载最新数据并更新下拉框内容。该实现适合需要动态展示数据场景的应用，如电商商品选择、多选分类等。

…..
<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>