jQuery实现多选下拉列表其实就是实现⼀个多选下拉列表，然后将选中的选项显⽰到相应的位置；
因为主要是jQuery选中⾏为的实现，所以，样式结构就不多说啦，直接贴代码啦：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="apps.bdimg/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="apps.bdimg/libs/vue/1.0.14/vue.js"></script>
<title>多选下拉</title>
</head>
<body>
<div class="zj-div">
<div class="btn">全部级别</div>
<ul>
<li class='list' v-for="item in myData">{{item}}</li>
</ul>
</div>
</body>
</html>
li表单我这⾥利⽤了vue进⾏了简单的的双向数据绑定，哈哈哈 也是很偷懒啦
*{
padding: 0px;
margin: 0px;
}
.zj-div{
position: relative;
left: 50px;
top: 50px;
}
.btn,li{
width: 200px;
height: 50px;
border: 1px solid #01bfda;
border-radius: 15px;
background: #000d16;
color:white;
line-height: 50px;
text-align: center;
font-size: 18px;
}
ul {
display: none;
width: 220px;
}
li {
list-style: none;
}
li:hover{
cursor: pointer;
background: #535a5c;
}
li[check="true"] {
background: #01bfda;
}
有⼀点需要注意的是，因为要实现多选，我想的是，选中的项与未选中的项通过不同的背景颜⾊进⾏区分；
所以就绑定了check属性，当check='true'时，背景颜⾊不同；
下⾯就是重点啦，画圈圈~~~
真的完全是利⽤⾃⼰的“强⼤”逻辑思维实现的，哈哈哈，也是很冗余啦~
因为不想直接引⽤组件，所以⼼⾎来潮就⾃⼰动⼿了，代码中估计都能看出我的思考过程了吧~~~~
可以说是很费劲了，奈何因为⽅法不熟悉加上不太了解如何优化，⽤的最笨的⽅法-----根据最后要达到的⽬标，考虑会出现的情况，完成的最初的版本但也是最好理解的版本（虽然我都嫌弃有点长）：
new Vue({
el:".zj-div",
data:{
myData:["全部级别","⼀级","⼆级","三级"],
}
})
$(document).ready(function(){
var len = $('ul').children('li').length;
$('.btn').click(function(e) {
$('ul').slideToggle();
e.stopPropagation();
e.stopPropagation();
}); //点击.btn实现ul的收放
$(document).not($('.list')).click(function(e){
$('ul').slideUp();
}) //.not⽅法就是除去当前这个元素
//点击页⾯除了li的其他部分时，ul收起
for(let i = 0; i < len; i++){
var firstAll = $('ul').children().first();
var arr = []; //为绑定.btn的值创建⼀个数组
$('li').eq(i).click(function(e){
e.stopPropagation(); //因为事件冒泡机制，⼀定要注意取消时间冒泡
if($(this).attr('check')!=="true"){
if($(this).text()=="全部级别"){ //如果当前点击的是“全部级别”，则所有的li背景都改变
$(this).attr('check','true');
$(this).siblings().attr('check',"true");
// arr.push($(this).text());
$('.btn').text($(this).text());
jquery的attr属性arr = ["⼀级","⼆级","三级"];
//此时.btn显⽰"全部级别"
}else{
$(this).attr('check','true'); //如果当前点击的li是其他的，则当前li背景改变
if(arr.includes($(this).text())){
$('.btn').text(arr); //分情况讨论此时.btn应该如何显⽰
}else{ //注意结合arr
arr.push($(this).text());
$('.btn').text(arr);
}
}
if($(this).text()!=="全部级别"&&().attr('check')=='true'&&().next().attr('check')=='true'&&().next().next().attr('check')=='tru $('ul').children().first().attr('check','true');
$('.btn').text($('ul').children().first().text());
} //if判断语句，我觉得肯定有其他的⽅法，我这个简直太简单粗暴了，可是我还没想到...
//这是我们应该考虑的⼀种情况，当其他⼏项全选时，"全部级别"应该默认被选中
}else{
if($(this).text()=="全部级别"){ //同理，当当前元素被选中，再被点击时要取消选中
$(this).attr('check','false');
$(this).siblings().attr('check',"false");
$('.btn').text($(this).text()); //注意此时，虽然.btn显⽰为"全部级别"
arr = []; //但实际上没有任何元素被选中，所以arr实际为空
}else{
$(this).attr('check','false');
$('ul').children().first().attr('check','false');
for(var a = 0 ; a < arr.length; a++){
if(arr[a] == $(this).text()){
arr.splice(a,1); //数组⽅法，删除索引为a的⼀个元素
$('.btn').text(arr);
if(arr.length == 0){ //如果arr数据为空，那么.btn显⽰"全部级别"
$('.btn').())
}
}
}
}
}
})
}
})
见解也就添加到注释⾥⾯啦~~哈哈哈 反正也是⾃⼰看 吼吼吼~~~
好啦 效果图：
慢慢的学习下来，我算是真的发现，好多东西，在真正动⼿前总觉得好像蛮简单，可⼀旦⼊坑，就会陷⼊长久的困惑......
去做的过程中，总会发现新的问题~~~所以 我就记⼀下，免得下次⼜有同样的需求，我⼜要重新思考 哈哈哈哈 也是很偷懒啦~~~毕竟 嗯 记忆⼒太差
That`s all~~
Happy Ending
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论