正文:

        先说点废话:一个需求,想把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(默认选中),并添加注释方便使用者二次开发。

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

Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐