阿里云優(yōu)惠券 先領券再下單

這篇文章主要介紹了bootstrap select2 動態(tài)從后臺Ajax動態(tài)獲取數據的代碼，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下

效果圖展示：

實現方式：

前端代碼：

<div class="form-group">
<label class="font-noraml">動態(tài)多選</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(); //執(zhí)行此函數，從后臺獲取數據，拼接成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>

后端實現代碼：

/**
* 動態(tài)獲取下拉框內容下拉框
*/
@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 動態(tài)從后臺Ajax動態(tài)獲取數據的代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！

如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！

來源：腳本之家

鏈接：https://www.jb51.net/article/176319.htm

申請創(chuàng)業(yè)報道，分享創(chuàng)業(yè)好點子。點擊此處，共同探討創(chuàng)業(yè)新機遇！