正常sele艘早祓胂ct多选可以添加multiple多选，但是有些select受js 控制不能多选，接下来教大家一个新的用input加js和css 来代替select多选或单选的方法。
*{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;}
<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>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>易鱼塘客户管理后台管理</title>
<meta name="renderer" content="webkit">
</head>
<body>
<link href="/static/duoxuan/css/duoxuan.css" rel="stylesheet" type="text/css">
<div class="admin-main layui-anim layui-anim-upbit" ng-app="hd" ng-controller="ctrl">
<form class="layui-form layui-form-pane">
<div class="layui-form-item">
<label class="layui-form-label">账户名</label>
<div class="layui-input-4">
<input type="text" id="area_name" name="area_name" lay-verify="required" placeholder="请输入账户来源名称" class="layui-input">
</div>
<label class="layui-form-label">账户编码</label>
<div class="layui-input-4">
<input type="text" id="area_bm" name="area_bm" lay-verify="required" placeholder="请设置账户编码" class="layui-input">
</div>
<label class="layui-form-label">账户负责人</label>
<div class="layui-input-4">
<div id="multiple" class="my-select-box">
<input type="text" id="area_fzr" name="area_fzr" class="my-select-input" placeholder="请选择" autocomplete="off" readonly>
<ul class="my-select-list">
<li data-value="1">推广</li>
<li data-value="1">推广2</li>
</ul>
</div>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button type="button" class="layui-btn" lay-submit="" lay-filter="submit">提交保存</button>
</div>
</div>
</form>
</div>
<script type="text/javascript" src="/static/duoxuan/js/jquery-3.2.1.min.js"></script>
<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+"$";
}
//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>
<script>
layui.use(['form', 'layer'], function () {
var form = layui.form, layer = layui.layer,$= layui.jquery;
//监听提交
form.on('submit(submit)', function(data){
/* layer.alert(JSON.stringify(data.field), {
title: '最终的提交信息'
})
return false;*/
$.post("{:url('Clues/areaAdd')}",data.field,function (res) {
if (res.code == 0){
layer.msg(res.msg,{time:2000});
layer.close(layer.index);
window.parent.location.reload();
}else {
layer.msg(res.msg,{time:2000});
}
},'json')
return false;
});
});
</script>
</body>
</html>
好了以上就是 input代替select多选输入希望大家在开发的过程中有帮助
