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：渲染的数据 格式如下：[{ 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（默认选中），并添加注释方便使用者二次开发。
如果还有其他需求等，可以留言，好做更新升级哦！其他不足之处，请多指教！
旨在为数千万中国开发者提供一个无缝且高效的云端环境，以支持学习、使用和贡献开源项目。
更多推荐
119
0- 0
已为社区贡献1条内容
所有评论(0)