使用方法还是原来的步骤：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标签进行注册渲染，这样它就具备了多选的功能！
完成！
全部代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>下拉多选</title>
</head>
<!--相当于引入了selectMultip.js文件-->
<script>
(function() {
selectMultip = {
register: function(id) {
//大致思路是：为下拉选创建一个隐藏的子选项，每次单选之后将单选的值追加到隐藏的子选项中，并将子选项选中显示即可
//全局查找所有标记multip的select
var eList = document.querySelectorAll("[multip]");
for(var i = 0;i < eList.length;i++){
render(eList[i]);
}
},
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("change", selchange);
e.addEventListener("change", 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;
}
}
})();
</script>
<body>
<p>1、选项被选中后变为蓝色，再次点击蓝色选项可取消</p>
<p>2、打开浏览器控制台输入selectMultip.setVal("22","1,3")或者selectMultip.setVal("22",["1","3"])可赋值回显</p>
<p>3、打开浏览器控制台输入selectMultip.getVal("22","1,3")可取值</p>
<p>4、tip是提示属性，添加到select标签上,添加后select标签后面有"*可多选"字样的红色提示</p>
<p>5、choose是默认选中属性，添加到option标签上</p>
<select id="22" multip style="width:180px;height: 30px;margin-left: 200px" tip>
<option value="">---请选择---</option>
<option value="1">人民币</option>
<option value="2">欧元</option>
<option value="3">美元</option>
<option value="4">英镑</option>
<option value="5">克朗</option>
</select>
<select id="33" multip style="width:180px;height: 30px;margin-left: 200px">
<option value="">---请选择---</option>
<option value="1">人民币</option>
<option value="2" choose>欧元</option>
<option value="3" choose>美元</option>
<option value="4">英镑</option>
<option value="5">克朗</option>
</select>
<span><--其中第二项和第三项添加choose属性，可以打开控制台进行查看</span>
</body>
</html>
<script>
var data = [{
value: "",
text: "---请选择---"
}, {
value: 1,
text: "薯片"
}, {
value: 2,
text: "大豆油"
}, {
value: 3,
text: "花生"
}]
selectMultip.register();
//动态渲染
selectMultip.reload("22", data);
</script>下面是使用的说明文档，总共四个方法！
说明文档
方法名 参数 说明
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(text);
}
selectMultip.reload(id, data,setData);
},
})注意上面标蓝色的部分需要以及注释中的说明！
标签属性说明：
multip:select标签上的属性，用来标识此标签为下拉多选
tip:select标签上的属性，用来提示用户为多选框如图：
choose:设置默认选中项，在option标签上添加此属性即可。注意：此属性可能在ie8以下版本不支持（没有亲自测试）
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
