MVC+Layui 多选下拉框xmSelect

本文介绍: C# MVC+Layui生成多选下拉框数据

1、选择layui拓展第三方组件找到xmselect

xmSelect下拉多选 xmSelect – Layui 第三方扩展组件平台 (layuion.com)

下载后放到项目文件中

2、项目引用js文件

<script src=”~/Content/dist/xm-select.js”></script>

3、html添加表单设置id

<div class=”layui-form-item”>
<label class=”layui-form-label”>物料类型：</label>
<div id=”seltype” style=”width:280px;margin-left:80px;”></div>
</div>

4、js添加数据

1、基本样式

var options = {
el: ‘#seltype’,
//name: ‘xmselectName’,//表单的name属性
layVerify: ‘required’,//必填项
//layVerType: ‘tips’,//提示类型同layui
toolbar: {//工具条,全选,清空,反选,自定义
show: true,
list: [
‘ALL’,
‘CLEAR’,
‘REVERSE’
]
},
data: [],//存放数据
filterable: true,//搜索功能
autoRow: true,//选项过多,自动换行
//initValue: [‘shuiguo’,’shucai’],//默认初始化,也可以数据中selected属性
//language: ‘zn’,//语言包
// repeat: true,//是否支持重复选择
//max: 2,//最多选择2个
// template({ item, sels, name, value }){
// //template:自定义下拉框的模板
// return item.name + ‘<span style=”position: absolute; right: 10px; color: #8799a3″>’+value+'</span>’
// },
};

2、关联组件

var seltype = xmSelect.render(options)；

3、ajax追加数据

var getmateriallist = function () {
$.ajax({
url: ‘XXX’,
type: “Get”,
success: function (res) {
if (res.length > 0) {//注：仅支持name value
seltype.update({ data: res })
}
}
})
}