MVC+Layui 多选下拉框xmSelect

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()；