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的selectdocument.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（默认选中），并添加注释方便使用者二次开发。
如果还有其他需求等，可以留言，好做更新升级哦！其他不足之处，请多指教！
select下拉框多选，超级好用！十分强大！相关推荐
- 使用element ui select下拉框多选，编辑状态下回显数据
最近在做一个项目,项目的后端是地址:https://github.com/wangyuanjun008/wyj-springboot-security.git 前端地址是 https://github ...
- bootstra select 下拉框多选，搜索效果
此处采用bootstrap-select插件,引入css和js bootstrap-select.css bootstrap-select.js bootstrap-select.min.css ...
- select下拉框多选
首先引入css 和 js 地址,下载地址 链接:https://pan.baidu.com/s/1G0gjJQt-OPJIqVDJbHCWLQ 提取码:eywf 将下载的三个文件引入到你自己的js ...
- select 下拉框的选中项的change事件
HTML文件<span style="float: left;">类 型: <select id="type" class=&qu ...
- JQuery从Excel表中获取数据添加到select下拉框多选的实现
JS代码如下 function importf(excel) {var perids = [];//for循环遍历Excel表中的数据,取出需要的列for(var i = 0 ; i < exc ...
- html设置下拉筛选可以多选,select下拉框（支持筛选、多选）
Chosen 是一个支持jQuery的select下拉框美化插件,它能让丑陋的.很长的select选择框变的更好看.更方便.不仅如此,它更扩展了select,增加了自动筛选的功能.它可对列表进行分组, ...
- ajax多选下拉,模拟select下拉框之多选（数据源采用模拟Ajax数据--原创）(示例代码)...
模拟select下拉框之多选 }ul,li{list-style:none; }#test{margin:20px 10px; }.clearfix:before, .clearfix:after{c ...
- select下拉框（支持筛选、多选）
Chosen 是一个支持jQuery的select下拉框美化插件,它能让丑陋的.很长的select选择框变的更好看.更方便.不仅如此,它更扩展了select,增加了自动筛选的功能.它可对列表进行分组, ...
- Layui实现动态生成select中的option项,同时设置select下拉框选中项
项目场景: 主要用于为民族select下拉框动态生成option值,同时在实现编辑功能时,表单中的select下拉框的选中项为后台传过来的数据. 举例: 如下图所示的表单内容,下图的民族和政治面貌se ...
最新文章
- java获取达梦数据库_Java连接达梦数据库驱动dm_jdbc
- Linux那些事儿 之 戏说USB(25)设备的生命线(八)
- Javascript 匀速运动停止条件——逐行分析代码，让你轻松了运动的原理
- 软件公司应该砍掉的成本
- 2017.8.17 开始了我的QT 学习。
- hadoop删除DataNode节点
- nand ubi -3 uboot和ubi
- .NET二级域名共享Session
- 玩转Android之MVVM开发模式实战，炫酷的DataBinding！
- 名字英文name域名_企业建站必读：六大方法锁定最佳企业域名
- Maven配置SpringMVC4+Spring4+Mybatis3环境
- (原创)如何解决matlab乱码问题
- 选择排序——Java排序算法
- 用微软卸载工具msicuu2解决office安装不上的问题，清理office残留文件
- 数字信号处理教程第五版答案
- python做生物信息学分析_Python从零开始第五章生物信息学⑤生存分析(log-rank)
- RTOS系列文章（5）:C语言程序运行原理分析：汇编、栈、栈帧、进栈、出栈、保存现场、恢复现场、返回
- 直系同源基因分析（orthofinder方法）
- 基于MATLAB的计算机视觉和图像处理代码
- java毕业设计共享充电宝系统mybatis+源码+调试部署+系统+数据库+lw