正常select多选可以添加multiple多选,但是有些select受js 控制不能多选,接下来教大家一个新的用input加js和css 来代替select多选或单选的方法。
-
准备css(样式可以自己改)
-
必备js
-
html实例
*{margin:0; padding:0;} ul,li{list-style:none;} :focus{outline: none;} input[type=text]{border:1px solid #ccc;} input[type=text]:hover,input[type=text]:focus{border-color: #57bc80; box-shadow: none;} .my-select-box{position: relative;} .my-select-box .my-select-input{ height: 38px; line-height: 38px; padding:0 5px; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAICAYAAADJEc7MAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAG2YAABzjgAA4DIAAIM2AAB5CAAAxgwAADT6AAAgbL5TJ5gAAABGSURBVHjaYvz//z8DOYCJgUzA0tnZidPK8vJyRpw24pLEpwnuVHRFhDQxMDAwMPz//x+OOzo6/iPz8WFGuocqAAAA//8DAD/sORHYg7kaAAAAAElFTkSuQmCC) right center no-repeat/*www.gynursingcare.cn*/; padding-right:20px !important; width:100%; box-sizing: border-box; } .my-select-box .my-select-list{position:absolute; left:0; z-index: 101; border:1px solid #ccc; border-top:none; max-height: 120px; overflow-y: auto; display: none; background: #fff; width:100%; box-sizing: border-box;} .my-select-box .my-select-list li{height: 38px; line-height: 38px; padding:0 3px; cursor:pointer; margin-bottom: 1px} .my-select-box .my-select-list li.choosed{background: #1f78ff; color:#fff;} .my-select-box .my-select-list li:hover{background: #1f78ff; color:#fff;}
-
js 涉及 jquery-3.2.1.min.js 可以自行网上下载
-
<script> ;(function($){ $.fn.MySelect=function(options){ var defaults={ splitChar:'|', //默认的分隔符 multiple:false //是否多选 }; var opt=$.extend({},defaults,options); this.each(function(){ var $box=$(this); var $input=$box.find("input.my-select-input"); //输入框 var $list=$input.next(); //ul装扮成下拉框 var inputHeight=$input.outerHeight(); //计算input输入框的高度和宽度,方便定位ul和设置ul及包裹元素的宽度 //var inputWidth=$input.innerWidth(); $list.css({"top":(inputHeight)}); //$box.width($input.outerWidth()); $input.focus(function(){ //输入框获得焦点后,显示下拉选择ul var $nextUl=$(this).next(); if($nextUl.children().length>0){ $(this).next().show(); } }).bind('input propertychange',function(){ //绑定监测输入框的输入值更改 var $this=$(this); var curText=$this.val(); var $nextUl=$this.next(); var $liList=$nextUl.find("li").removeClass("choosed"); if(!opt.multiple){ //如果是单选 $this.attr("data-id",""); if($liList.length>0){ $liList.each(function(i,item){ var txt=$(item).text(); if(txt===curText){ var v=$(item).attr("data-value"); $this.attr("data-id",v); $(item).addClass("choosed"); } }); } }else{ //如果是多选 var inputValArr=curText?curText.split(opt.splitChar):[]; if(inputValArr.length>0){ for(var i=0; i<inputValArr.length; i++){ var txtItem=inputValArr[i]; if($liList.length>0){ $liList.each(function(i,item){ var txt=$(item).text(); if(txt===txtItem){ //var v=$(item).attr("data-value"); //$this.attr("data-id",v); $(item).addClass("choosed"); } }); } } } } }); //修改成如下事件绑定,为了给动态添加的li也可以产生点击效果 $list.off('click', 'li').on('click', 'li', function (e) { var $this = $(this); var value = $this.attr("data-value") || ''; if(!opt.multiple){ //如果是单选 $input.val($this.text()).attr("data-id", value); $this.addClass("choosed").siblings().removeClass("choosed"); $this.parent().hide(); //隐藏ul }else{ //如果是多选的情况下,单击li项时,情形一:li项的text已经在输入框中,情形二:li项的text不在输入框中 //正则表达式去判断li的text是否在输入框中 var curInputVal=$input.val(); var inputValArr=curInputVal?curInputVal.split(opt.splitChar):[]; var liText=$this.text(); //^abc$|^abc\||\|abc\||\|abc$ var regStr=''; if(opt.splitChar==="|" ||opt.splitChar==="$"){ //如果分隔符是特殊字符要进行转义 regStr="^"+liText+"$"+"|^"+liText+"\\"+opt.splitChar+"|"+"\\"+opt.splitChar+liText+"\\"+opt.splitChar+"|"+"\\"+opt.splitChar+liText+"$"; }else{ regStr="^"+liText+"$"+"|^"+liText+opt.splitChar+"|"+opt.splitChar+liText+opt.splitChar+"|"+opt.splitChar+liText+"$"; } //www.gynursingcare.cn//console.log("正则串",regStr); var reg=new RegExp(regStr); if(reg.test(curInputVal)){ //说明当前li的值已经在input中存在,此时把li项移除 if(inputValArr.length>0){ for(var m=0; m<inputValArr.length; m++){ if(inputValArr[m]==liText){ inputValArr.splice(m,1); m--; //break; } } } $this.removeClass("choosed"); }else{ //如果不在输入框中,则把该项 inputValArr.push($this.text()); $this.addClass("choosed"); } $input.val(inputValArr.join(opt.splitChar)); //将input的值用分隔符组装起来赋值给输入框 } }); }); $(document).click(function (e) { //点击.my-select-box范围外时隐藏ul下拉框 var target=e.target; var $target=$(target); var $parent=$target.closest('.my-select-box'); if($parent.length<1){ //说明不是.my-select-box范围内点击,将ul隐藏 $(".my-select-list").hide(); }else if($parent.length==1){ //如果存在多个my-select-box的情况,将其余的非这项以外的都隐藏 var $ul=$parent.find(".my-select-list"); var flag=$ul.is(":hidden"); $(".my-select-list").hide(); if(!flag) $ul.show(); } }); return this; } })(jQuery); $("#multiple").MySelect({multiple:true}); $("#single").MySelect(); </script>