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 })
}
}
})
}
5、读取多选下拉框的值
var list=seltype.getValue()；