下拉多选框

首先是引入下面一段代码（已经修改过的 ，无bug 可直接粘贴）

(function() {
    selectMultip = {
        register: function(id) {
            //大致思路是：为下拉选创建一个隐藏的子选项，每次单选之后将单选的值追加到隐藏的子选项中，并将子选项选中显示即可
            //全局查找所有标记multip的select
            document.querySelectorAll("[multip]").forEach(function(e) {
                render(e);
            })
        },
        reload: function(id, data, setData) {
            var htm = "";
            for(var i = 0; i < data.length; i++) {
                htm += '<option value="' + data[i].value + '">' + data[i].text + '</option>'
            }
            var e = document.getElementById(id);
            e.innerHTML = htm;
            render(e);
            this.setVal(id, setData);
        },
        setVal: function(id, str) {
            var type = Object.prototype.toString.call(str);
            switch(type) {
                case "[object String]":
                    document.getElementById(id).val = str;
                    break;
                case "[object Array]":
                    document.getElementById(id).val = str.toString();
                    break;
                default:
                    break;
            }
        },
        getVal: function(id) {
            return document.getElementById(id).val;
        },

    }

    function render(e) {
        e.param = {
            arr: [],
            valarr: [],
            opts: []
        };
        var choosevalue = "",
            op;

        for(var i = 0; i < e.length; i++) {
            op = e.item(i);
            e.param.opts.push(op);
            if(op.hasAttribute("choose")) {
                if(choosevalue == "") {
                    choosevalue = op.value
                } else {
                    choosevalue += "," + op.value;
                }

            }
        }

        //创建一个隐藏的option标签用来存储多选的值，其中的值为一个数组
        var option = document.createElement("option");
        option.hidden = true;
        e.appendChild(option);
        e.removeEventListener("input", selchange);
        e.addEventListener("input", selchange);

        //重新定义标签基础属性的get和set方法，实现取值和赋值的功能
        Object.defineProperty(e, "val", {
            get: function() {
                return this.querySelector("[hidden]").value;
            },
            set: function(value) {
                e.param.valarr = [];
                var valrealarr = value == "" ? [] : value.split(",");
                e.param.arr = [];
                e.param.opts.filter(function(o) {
                    o.style = "";
                });
                if(valrealarr.toString()) {
                    for(var i = 0; i < valrealarr.length; i++) {
                        e.param.opts.filter(function(o) {
                            if(o.value == valrealarr[i]) {
                                o.style = "";
                                e.param.arr.push(o.text);
                                e.param.valarr.push(o.value)
                            }
                        });
                    }
                    this.options[e.length - 1].text = e.param.arr.toString();
                    this.options[e.length - 1].value = e.param.valarr.toString();
                    this.options[e.length - 1].selected = true;
                } else {
                    this.options[0].selected = true;
                }

            },
            configurable: true
        })
        //添加属性choose 此属性添加到option中用来指定默认值
        e.val = choosevalue;
        //添加属性tip 此属性添加到select标签上
        if(e.hasAttribute("tip") && !e.tiped) {
            e.tiped = true;
            e.insertAdjacentHTML('afterend', '<i style="color: red;font-size: 12px">*可多选</i>');
        }
    }

    function selchange() {

        var text = this.options[this.selectedIndex].text;
        var value = this.options[this.selectedIndex].value;
        this.options[this.selectedIndex].style = "color: blue;";
        var ind = this.param.arr.indexOf(text);
        if(ind > -1) {
            this.param.arr.splice(ind, 1);
            this.param.valarr.splice(ind, 1);
            // this.param.opts.filter(function(o) {
            //     if(o.value == value) {
            //         o.style = "";
            //     }
            // });
            this.options[this.selectedIndex].style = "";
        } else {
            this.param.arr.push(text);
            this.param.valarr.push(value);
        }
        this.options[this.length - 1].text = this.param.arr.toString();
        this.options[this.length - 1].value = this.param.valarr.toString();
        if(this.param.arr.length > 0) {
            this.options[this.length - 1].selected = true;
        } else {
            this.options[0].selected = true;
        }
    }
})();

先引入到你自己的项目中使用，这个是我的项目位置
<!--多选-->
<script type="text/javascript" src="/js/appjs/app/workOrders/selectMultip.js"></script>
selectMultip.register(); 这个必须要有的 直接放在最后

如何使用呢
解释一下： multip 是多选的 tip 是 提示 上方的代码显示有的可以细看

   <select multip="m" class="userlises1"  tip>

                                    </select>

这边是：直接请求了接口返回了数据
userList 这个是请求过来的数据的一个集合

let zhipai
userList.forEach(function (item, index, arr) {
            zhipai = `
          <option   value="${item.userId}">${item.name}</option>

        `
            $(".userlises1").append(zhipai)

如果不喜欢选中的颜色，可自行更改 谢谢 默认是蓝色