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ì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)我們網(wǎng)站的支持!
如果你覺得本文對(duì)你有幫助,歡迎轉(zhuǎn)載,煩請(qǐng)注明出處,謝謝!
上一篇:沒有了
欄 目:AJAX相關(guān)
下一篇:沒有了
本文標(biāo)題:bootstrap select2 動(dòng)態(tài)從后臺(tái)Ajax動(dòng)態(tài)獲取數(shù)據(jù)的代碼
本文地址:http://www.jygsgssxh.com/a1/AJAXxiangguan/11257.html
您可能感興趣的文章
- 01-11ajax請(qǐng)求后臺(tái)得到j(luò)son數(shù)據(jù)后動(dòng)態(tài)生成樹形下拉框的方法
- 01-11Ajax實(shí)現(xiàn)動(dòng)態(tài)顯示并操作表信息的方法
- 01-11ajax動(dòng)態(tài)查詢數(shù)據(jù)庫數(shù)據(jù)并顯示在前臺(tái)的方法
- 01-11通過Ajax請(qǐng)求動(dòng)態(tài)填充頁面數(shù)據(jù)的實(shí)例
- 01-11Ajax獲取php返回json數(shù)據(jù)動(dòng)態(tài)生成select下拉框的實(shí)例
- 01-11ajax動(dòng)態(tài)加載json數(shù)據(jù)并詳細(xì)解析


閱讀排行
- 1C語言 while語句的用法詳解
- 2java 實(shí)現(xiàn)簡(jiǎn)單圣誕樹的示例代碼(圣誕
- 3利用C語言實(shí)現(xiàn)“百馬百擔(dān)”問題方法
- 4C語言中計(jì)算正弦的相關(guān)函數(shù)總結(jié)
- 5c語言計(jì)算三角形面積代碼
- 6什么是 WSH(腳本宿主)的詳細(xì)解釋
- 7C++ 中隨機(jī)函數(shù)random函數(shù)的使用方法
- 8正則表達(dá)式匹配各種特殊字符
- 9C語言十進(jìn)制轉(zhuǎn)二進(jìn)制代碼實(shí)例
- 10C語言查找數(shù)組里數(shù)字重復(fù)次數(shù)的方法
本欄相關(guān)
- 01-11layui的checbox在Ajax局部刷新下的設(shè)置方
- 01-11ajax請(qǐng)求后臺(tái)得到j(luò)son數(shù)據(jù)后動(dòng)態(tài)生成樹
- 01-11ajax獲得json對(duì)象數(shù)組 循環(huán)輸出數(shù)據(jù)的
- 01-11解決ajax請(qǐng)求后臺(tái),有時(shí)收不到返回值的
- 01-11詳談ajax返回?cái)?shù)據(jù)成功 卻進(jìn)入error的方
- 01-11解決AJAX返回狀態(tài)200沒有調(diào)用success的問
- 01-11快速解決ajax返回值給外部函數(shù)的問題
- 01-11Ajax實(shí)現(xiàn)動(dòng)態(tài)顯示并操作表信息的方法
- 01-11ajax實(shí)現(xiàn)從后臺(tái)拿數(shù)據(jù)顯示在HTML前端的
- 01-11ajax動(dòng)態(tài)查詢數(shù)據(jù)庫數(shù)據(jù)并顯示在前臺(tái)
隨機(jī)閱讀
- 08-05DEDE織夢(mèng)data目錄下的sessions文件夾有什
- 04-02jquery與jsp,用jquery
- 01-11ajax實(shí)現(xiàn)頁面的局部加載
- 08-05織夢(mèng)dedecms什么時(shí)候用欄目交叉功能?
- 01-11Mac OSX 打開原生自帶讀寫NTFS功能(圖文
- 01-10使用C語言求解撲克牌的順子及n個(gè)骰子
- 01-10delphi制作wav文件的方法
- 01-10SublimeText編譯C開發(fā)環(huán)境設(shè)置
- 01-10C#中split用法實(shí)例總結(jié)
- 08-05dedecms(織夢(mèng))副欄目數(shù)量限制代碼修改


