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

代码007普通

打赏 收藏 海报 链接