jquery 下拉框 select2 运用 笔记

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  

效果图：

点击添加

4， jquery 动态加载：

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

效果图：

后台加载出来

转载于:https://www.cnblogs.com/cfpl-wutao/p/10042938.html