select下拉框多选，超级好用！十分强大！

     

正文：

        先说点废话：一个需求,想把select变成下拉多选，网上查找了半天，给出的方案都是自定义一个标签，或者弄个什么ul下面li进行选择，看起来就繁琐，本人只想在select上面做文章，不得已，自己写了一个，只需要在select上加个属性即可，方便实用！

       2019.11.30之前，算是selectMultip的第一个版本，没想到用的人还不少，自然也发现了很多隐藏的bug，虽然它比较简单但大家使用时还是有些困惑，基于以上等原因，selectMultip2.0问世（哈哈），2.0做了全面的升级，不仅解决了之前发现的bug，而且新增了api，使用方法还是原来的步骤：1、引入js文件，2、在select标签上添加属性multip，然后调用方法即可（只有两步哦！）

可以先访问一下这里哟：演示地址 （不想访问也可以往下读）

先上图：

这个是选中后的效果，我们用的是select标签，选中后子标签会变成蓝色，如果想取消，再点击一下即可取消。

取值，调用selectMultip.getVal("22")方法即可：

赋值，调用selectMultip.setVal(id,data)即可，第二个参数类型可以是字符串或者数组,如图：

具体取值、赋值、动态加载等可以看下面的说明文档哦！

那现在就开始使用吧（只需要两步）：

首先，将下面的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;
			}
		}
	})();

其次，在你的select上面加一个multip属性，如图：

然后，就是代码的实现：

调用一下这个selectMultip.register();方法即可。

这个方法是对标有multip属性的select标签进行注册渲染，这样它就具备了多选的功能！

完成！

---

下面是使用的说明文档，总共四个方法！

说明文档

方法名	参数	说明
selectMultip.register()	无	将全局下所有具有multip属性的select标签注册成为具有多选功能的下拉选。
selectMultip.reload(id, data,setData)	id：select标签上的id值 data：渲染的数据 格式如下：[{         value: "",         text: "---请选择---"     }, {         value: 1,         text: "薯片"     }, {         value: 2,         text: "大豆油"     }, {         value: 3,         text: "花生"     }] setData:设置默认值，可选。具体格式可参照selectMultip.selVal()方法的第二个参数	重新渲染，使用于联动或者动态渲染select标签的场景，从后台服务器获得数据之后可调用此方法。
selectMultip.setVal(id, data)	id:select标签上的id值 data: 可以为字符串，如：“1,2,3”或者“a,b,c”  也可以为数组，如[1,2,3]或者["a","b","c"]	给标签赋值
selectMultip.getVal(id)	id:select标签上的id值	取值

            

---

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

需要动态加载的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);

    },
   
})

 

---

标签属性说明：

multip:select标签上的属性，用来标识此标签为下拉多选

tip:select标签上的属性，用来提示用户为多选框如图：

choose:设置默认选中项，在option标签上添加此属性即可。注意：此属性可能在ie8以下版本不支持（没有亲自测试）

---

2019.11.30更新日志：对版本进行全面升级，并且增加动态数据渲染功能，取值/赋值/设置默认值 将更加简单方便，适用于联动等场景，并且修复隐藏bug，代码更加健壮。可以将此称之为selectMultip小框架。

2019.11.24更新日志：解决取值个数不符问题（对之前使用的小伙伴说声抱歉，在用户多次选择取消之后会出现取值不正确的问题，感谢丶奈何亦是泪提出疑问，本人在仔细测试后才发现确实有此bug，第一时间做了更新，文本中的代码是最新代码，大家可以放心使用）

2019.11.15更新日志：添加属性choose（默认选中），并添加注释方便使用者二次开发。

如果还有其他需求等，可以留言，好做更新升级哦！其他不足之处，请多指教！