突然要实现一个 下拉多选的功能吧  想自己写出来其实也是能做到， 但是吧 太浪费时间了 就去翻了翻百度找到了这个插件  

简单 方便  主要是以前也使用过layui的一些经验 ，上手可能也快点

https://gitee.com/maplemei/xm-select    // 代码下载地址

1. 安装和使用

直接引入使用就行了  如果你下载到本地的话

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

2. 在搞一个div容器  

    <div id="demo"></div>

3. js 渲染使用

 var demo = xmSelect.render({
                el: '#demo',
                language: 'zn',
                data: [
                    //  selected： true  默认选中状态
                    { name: '张三', value: 1 , selected: true },
                    { name: '李四', value: 2 },
                    { name: '王五', value: 3 },
                ],
                // 当选择为空的时候 提示信息
                tips:'请选择',
                // 每次点击选择的事件回调
                on: function (data) {
                    console.log(data);
                    //arr:  当前多选已选中的数据
                    var arr = data.arr;
                    //change, 此次选择变化的数据,数组
                    var change = data.change;
                    //isAdd, 此次操作是新增还是删除
                    var isAdd = data.isAdd;

                    //可以return一个数组, 代表想选中的数据
                    //return []
                },
                // 监听打开事件
                show: function() {}，
                // 监听关闭事件
                hide: function() {}
            })

4. 表单重新渲染  就是 重新请求数据的话

demo.updata({
    data:[],
    autoRow: true    // 开启自动换行
})

5. 我们来看下 实际效果

 

其实 上面的 也只是  xm-select的 冰山一角 更多的功能 请参照官网  哈

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

关注我 持续更新 前端知识