最近公司有个老项目需要加一些新功能,老项目是用jquery开发的,现在要做一个下拉多选框,找了很多原生的UI插件都没有下拉多选框或者就是原生需要加ctrl才可以多选,这里用 ul li 做的下拉多选框下面放代码:
html代码:
<div class="divBox"> <div class="duiMutiple"> <div class="divSel">多选选择</div> <ul id="usertype"> <li value="1">吃饭</li> <li value="2">睡觉</li> <li value="3">玩手机</li> </ul> </div> </div>
javaScript代码(记得引入jquery.js文件)
let setValList = [],setLabelList = []; //select多选 $("#usertype").hide(); $(".divSel").click(function() { $("#usertype").toggle(); }); $('#usertype li').click(function () { if(setValList.indexOf($(this).val()) === -1){ setValList.push($(this).val()); setLabelList.push($(this).text()); $(this).addClass('optionSelStyle'); }else { let index = setValList.indexOf($(this).val()); setValList.splice(index,1); setLabelList.splice(index,1); $(this).removeClass('optionSelStyle'); } console.log(setLabelList) //选择的多选框中的数据 $('.divSel').html(setLabelList.join(' ')); })
css代码:
.duiMutiple{ width: 120px; height: 24px; position: relative; margin-top: 7px; display: block; .divSel{ width: 93px; height: 24px; line-height: 24px; padding-left: 10px; cursor: pointer; background: #fff; border: 1px solid #95b7e7; position: absolute; top: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #usertype{ width:120px; max-height:200px; border-radius:5px; background: #fff; border:1px solid #95b7e7; overflow: auto; margin-top: -20px; display: none; z-index: 99999!important; position: absolute; top: 48px; li{ width: 90px; height: 30px; line-height: 30px; padding: 0 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; float: left; } } .optionSelStyle{ background: #3188E1; color: #fff; } }