Select下拉多选

首先，将下面的js代码复制到一个js文件中（js文件名可以命名为selectMultip哦），并将其引入项目中即可

(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 = "color: blue;";
									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 = "";
					}
				});
			} 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;
			}
		}
	})();

HTML代码

<select id="creType" multip  class="selectpicker show-tick form-control">
</select>

调用方法，冲后台获取数据，动态渲染

//获取证件类型信息
        getCreTypes: function () {
            $.get(baseURL + "sys/dict/getTypes?type=CREDENTIAL_TYPE", function (r) {
                var data = [];
                for(var i = 0;i < r.types.length;i++){
                    var obj ={};
                    obj.value=r.types[i].code;
                    obj.text=r.types[i].name;
                    data.push(obj);
                }
                selectMultip.reload("creType", data);
                // vm.creTypes = r.types;
            });
        },

关于动态渲染说明以及示例：

需要动态加载的select下拉选项我们往往异步请求后台拿到数据后，对下拉选进行拼接，这个繁琐的步骤已经在reload方法中做好了，我们只需要传递正确的数据就可以完成，下面举个例子，假设我们使用jquery的ajax获取后台数据：

我们代码需要这么写：

$.ajax({
    url: url,
    type: type ,
    data: param,
    success: function (res) {
        //data中如果是[{value: 1,text: "薯片"}]格式与字段直接传递，如果不是 特别注意  字段名要一致
       //假设我们拿到是数据是[{id: 1,name: "薯片"}]
 
         var data = []
         for(var i = 0;i < res.list.length;i++){
            var obj ={};
            obj.value=res.list[i].id;
             obj.text=res.list[i].name;
            data.push(obj);
         }
         selectMultip.reload(id, data,setData);
    },
})

设置值：

//参数一：标签id 	
//参数二：设置的值，可以为字符串"1,2,3"也可以是数组[1,2,3]
selectMultip.setVal("creType", data)

取值

//参数：标签的id
selectMultip.getVal("creType")

原文链接：https://blog.csdn.net/bokestudy/article/details/90177144