bootstrap select2 動(dòng)態(tài)從后臺(tái)Ajax動(dòng)態(tài)獲取數(shù)據(jù)的代碼
效果圖展示:

實(shí)現(xiàn)方式:
前端代碼:
<div class="form-group">
<label class="font-noraml">動(dòng)態(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 : '請(qǐng)選擇' , //默認(rèn)顯示內(nèi)容
//placeholder:'請(qǐng)選擇',//默認(rèn)文字提示
// {#tags: true,//允許手動(dòng)添加 #}
allowClear: true,//允許清空
});
loadnetdatas2();
loadnetdatabs2(); //執(zhí)行此函數(shù),從后臺(tái)獲取數(shù)據(jù),拼接成option標(biāo)簽,添加到select的里面
//初始化刷新數(shù)據(jù)
$(window).on('load', function() {
$('#bsselect2ID').selectpicker('val', '');
$('#bsselect2ID').selectpicker('refresh');
});
});
//var category = $.trim($('#select2ID option:selected').val());
function loadnetdatabs2(){
$.ajax({
url : url, //后臺(tái)controller中的請(qǐng)求路徑
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)
//拼接成多個(gè)<option><option/>
netnames.push('<option value="'+netdata.userId+'">'
+netdata.userName+'</option>')
}
$("#bsselect2ID").html(netnames.join(''));
//根據(jù)netID(根據(jù)你自己的ID寫)填充到select標(biāo)簽中
$('#bsselect2ID').selectpicker('val', '');
$('#bsselect2ID').selectpicker('refresh');
}
},
error : function() {
alert('查詢出錯(cuò)');
}
});
};
</script>
后端實(shí)現(xiàn)代碼:
/**
* 動(dòng)態(tài)獲取下拉框內(nè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;
}
總結(jié)
以上所述是小編給大家介紹的bootstrap select2 動(dòng)態(tài)從后臺(tái)Ajax動(dòng)態(tài)獲取數(shù)據(jù)的代碼,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
如果你覺(jué)得本文對(duì)你有幫助,歡迎轉(zhuǎn)載,煩請(qǐng)注明出處,謝謝!
相關(guān)文章
解決IE下AjaxSubmit上傳文件提示下載文件問(wèn)題
這篇文章主要介紹了解決IE下AjaxSubmit上傳文件提示下載文件問(wèn)題,需要的朋友可以參考下2017-04-04
ajax實(shí)現(xiàn)簡(jiǎn)單實(shí)時(shí)驗(yàn)證功能
這篇文章主要介紹了ajax實(shí)現(xiàn)簡(jiǎn)單實(shí)時(shí)驗(yàn)證功能,需要的朋友可以參考下2017-12-12
Ajax讀取txt并對(duì)txt內(nèi)容進(jìn)行分頁(yè)顯示功能
這篇文章給大家介紹了Ajax讀取txt并對(duì)txt內(nèi)容進(jìn)行分頁(yè)顯示功能,非常不錯(cuò),具有參考借鑒價(jià)值,感興趣的朋友一起看看吧2016-11-11
發(fā)現(xiàn)個(gè)AJAX圖片瀏覽器SIMPLEVIEWER
發(fā)現(xiàn)個(gè)AJAX圖片瀏覽器SIMPLEVIEWER...2007-04-04
利用iframe實(shí)現(xiàn)ajax跨域通信的實(shí)現(xiàn)原理(圖解)
一般情況下都是用在同一域下的ajax請(qǐng)求;但是如果請(qǐng)求是發(fā)生在不同的域下,請(qǐng)求就無(wú)法執(zhí)行,并且會(huì)拋出異常提示不允許跨域請(qǐng)求,接下來(lái)介紹利用iframe實(shí)現(xiàn)ajax跨域通信感興趣的朋友可以了解下,或許對(duì)你學(xué)習(xí)ajax跨域有所幫助2013-02-02
Ajax讀取數(shù)據(jù)到表格的實(shí)現(xiàn)代碼
前兩篇我們講了"ajax開始的準(zhǔn)備"與及如何使用ajax技術(shù)進(jìn)行簡(jiǎn)單的數(shù)據(jù)讀?。裉煳覀円v的是:使用Ajax無(wú)刷新技術(shù)讀取服務(wù)端多條數(shù)據(jù),并將返回的數(shù)據(jù)顯示到一個(gè)表格內(nèi).2010-08-08

