jquery 下拉框 select2 运用 笔记

  • Post author:
  • Post category:其他


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