1,添加select2 樣式 參考（https://select2.org/? ）??

2,Html:

?<select id="txtType" name="Type" class="form-control select2" multiple="multiple">

</select>

3,jquery

@section scripts{

? $(document).ready(function () {

var selectUpload = {
method: function () {
$.ajax({
type: "get",
url: "/Backstage/SelecType",
success: function (SelecList) {
for (var i = 0; i < SelecList.length; i++) {
var id = SelecList[i].Id;
var type = SelecList[i].英雄類型;
console.log('英雄類型 load success');
$("#txtType").append("<option value='" + id + "'>" + type + "</option>");
$('.select2').select2({
allowClear: true,
language: "zh-CN"? ? ?

});? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

}
}
})
}
}
selectUpload.method();

}

? });

封裝function??

效果圖：

點(diǎn)擊添加

4， jquery 動態(tài)加載：

$.ajax({
type: "post",
url: "/Backstage/GetTypeIds",
data: { Id: rowdata.Id },
success: function (typeIds) {
console.log(typeIds);
$('#txtType').val(typeIds).trigger('change');? ?（typeIds 后臺返回的是 List<int>類型 ）
}
});

效果圖：

后臺加載出來

轉(zhuǎn)載于:https://www.cnblogs.com/cfpl-wutao/p/10042938.html

總結(jié)

以上是生活随笔為你收集整理的jquery 下拉框 select2 运用 笔记的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。