基于Layui多选下拉框的第三方插件xm-select

在官网中下载xm-select

官网：https://maplemei.gitee.io/xm-select/#/component/install

 

 

 

 

 

 找到最新版本下载zip 解压，只需要把文件夹dist下的xm-select.js放入到项目中就可以了

第一步引入js

<script src="/Content/xm-select.js"></script>

第二步在html文件中放入容器标签

<div class="layui-input-demo" id="demo1"></div>

第三步js

$.ajax({
    url: '',//获取数据的url
    type: "POST",
    datatype: 'json',
    async: false,
    data: {},
    success: function (ret) {
        datalist = [
            { name: '张一', value: 1 },
            { name: '张二', value: 2 },
            { name: '张三', value: 3 }
        ];

        //如果不需要动态获取，直接使用这一部分就可以
        demo1 = xmSelect.render({
            el: '#demo1',
            language: 'zn',
            toolbar: {
                show: true,
            },
            //默认提示
            tips: '请选择XXXXXX',
            //开启搜索
            filterable: true,
            //搜索提示
            searchTips: '请输入XXXXXX',
            data: datalist,
        });

    },
});

获取选中的值并传入后台

function sel_name(opt1) {
    var selectArr = demo1.getValue();//获取全部选中信息
    var opt1 = "";
    for (var i = 0; i < selectArr.length - 1; i++) {
        opt1 += selectArr[i].value + ",";
    };
    opt1 = opt1 + selectArr[selectArr.length];//根据全部信息选择需要的name，value等数据
    return opt1;
}

获取数据给多选下拉框赋值

//传入从后台获取的数据
function sel_data(data) {
    //对数据进行拆分，取出其中的name和value,变成初始的对象数组形式
    var array = data.split(',');
    var orgList = [];
    for (var i = 0; i < array.length; i++) {
        var obj = array[i].split('|');
        orgList.push({ name: obj[0], value: obj[1] });
    }
    sea_name31.setValue(orgList);//将对象数组赋给多选下拉框
}