<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>下拉多选框</title>
<link rel="stylesheet" href="./css/index1.css">
<link rel="stylesheet" href="./iconfont/iconfont.css">
</head>
<body>
<div class="box">
<!-- 头部输入框 -->
<div class="top">
<input type="text" name="" id="input1">
<i class="iconfont icon-arrow-up-bold size"></i>
<ul>
<li class="change">666</li>
<li class="change">777</li>
<li class="arr1">333</li>
</ul>
</div>
<!-- 下拉列表 -->
<div class="list">
<ul class="list-ul">
</ul>
</div>
</div>
<script src="./js/index1.js"></script>
</body>
</html>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
li {
list-style: none;
}
.box {
width: 300px;
position: relative;
top: 50px;
left: 50px;
}
.top {
height: 45px;
display: flex;
position: relative;
}
.top input {
width: 300px;
height: 45px;
font-size: 25px;
padding: 0 20px;
border-radius: 10px;
border: 1px solid #d1ccd0;
outline: none;
}
.top .blue {
border: 2px solid #409eff;;
}
.top .size {
width: 16px;
height: 16px;
position: relative;
top: 50%;
left: -30px;
margin-top: -8px;
transform: rotate(180deg);
transition: all .5s;
color: #d1ccd0;
}
.top ul {
position: absolute;
display:flex;
font-size: 10px;
top: 50%;
transform: translateY(-50%);
left: 15px;
}
.top ul li {
background-color: #409eff;
color: #fff;
padding: 1px 10px;
margin-left: 3px;
border-radius: 5px;
display: none;
}
.list {
width: 300px;
height: 230px;
border-radius: 5px;
margin-top: 5px;
background-color:#fff;
border: 1px solid #d1ccd0;
box-shadow: 0px 0px 5px 0px #aaa;
display: none;
/* 超出隐藏,需要时加滚动条*/
overflow: auto;
}
/* 隐藏滚动条 */
.list::-webkit-scrollbar {
display: none;
}
.list ul {
display: flex;
flex-direction: column;
margin: 8px 0;
}
.list ul li {
display: flex;
height: 27px;
align-items: center;
padding: 0 20px;
color: #65676b;
cursor: pointer;
}
.list ul li:hover {
background-color: #f5f8ff;
}
.list ul li label {
font-size: 10px;
margin-left: 15px;
display: block;
width: 100%;
}
.fontBlue {
color: #0075ff;
}
// 获取整体大盒子元素
let box = document.querySelector('.box')
// 获取输入框元素
let input = document.querySelector('#input1')
// 获取字体图标元素
let round = document.querySelector('.top .size')
// 获取下拉列表
let list = document.querySelector('.list')
// 鼠标进入
box.addEventListener('mouseenter', function () {
// 显示下拉列表
list.style.display = 'block'
// 外框线变色
input.classList.add('blue')
// 图标旋转
round.style.transform = 'rotate(0deg)'
})
// 鼠标离开
box.addEventListener('mouseleave', function () {
// 隐藏下拉列表
list.style.display = 'none'
// 外框线颜色恢复
input.classList.remove('blue')
// 图标恢复
round.style.transform = 'rotate(180deg)'
})
// 获取元素ul
let ul = document.querySelector('.list-ul')
// 新建数组对象
let optionArr = [
{
id: 'l1',
name: '全部'
},
{
id: 'l2',
name: '鱼香肉丝'
},
{
id: 'l3',
name: '宫保鸡丁'
},
{
id: 'l4',
name: '西红柿炒鸡蛋'
},
{
id: 'l5',
name: '五彩水饺'
},
{
id: 'l6',
name: '清蒸鲈鱼'
},
{
id: 'l7',
name: '红烧茄子'
},
{
id: 'l8',
name: '土豆烧牛肉'
},
{
id: 'l9',
name: '麻婆豆腐'
},
{
id: 'l10',
name: '糖醋里脊'
}
]
// 新建小li,追加到ul中,通过循环遍历渲染完成
for (let i = 0; i < optionArr.length; i++) {
// 有几条数据就新建几个小li
let li = document.createElement('li')
// 新建复选框及label元素
let input1 = document.createElement('input')
let label = document.createElement('label')
// 修改表单属性为复选框
input1.type = 'checkbox'
// 给表单添加id属性
input1.id = `${optionArr[i].id}`
// 给第一个li的input和label设置class属性,其他的li设置相同的input和label设置class属性
if (i === 0) {
input1.setAttribute("class", 'all');
label.setAttribute("class", 'sp');
} else {
input1.setAttribute("class", 'check');
label.setAttribute("class", 'wz');
}
// 给label修改文字内容,值为对象的name属性值
label.innerText = `${optionArr[i].name}`
// 给label设置for属性,值为对象的id属性值
label.setAttribute("for", `${optionArr[i].id}`);
//复选框及label元素追加给li
li.appendChild(input1)
li.appendChild(label)
// 将li追加给ul
ul.appendChild(li)
}
// 选中的数组
let chooseArr = []
let cks = document.querySelectorAll('.top ul .change')
let arr1 = document.querySelector('.top ul .arr1')
/* let lis = document.querySelectorAll('.list ul li') */
// 获取刚才新建的所有class为check的复选框
let checkboxs = document.querySelectorAll('.list ul li .check')
// 获取刚才新建的所有class为wz的label
let labels = document.querySelectorAll('.list ul li .wz')
let tag1 = cks[0]
let tag2 = cks[1]
let k = 0
// 循环遍历所有li,添加点击事件
for (let i = 0; i < checkboxs.length; i++) {
// +1是因为li的伪数组长度比checkboxs和checkboxs大1
checkboxs[i].addEventListener('click', function () {
updateCheckStatus()
})
}
// 获取新建的class为all的复选框
let all = document.querySelector('.list ul li .all')
// 获取新建的class为sp的label
let sp = document.querySelector('.list ul li .sp')
// 全部按钮
all.addEventListener('click', function () {
checkAll()
updateCheckStatus()
})
function updateCheckStatus() {
// let count = 0
let arr = []
// 是否全选,默认认为全选
let isCheckAll = true
for(let i=0;i<checkboxs.length;i++) {
if(checkboxs[i].checked) {
// count++
arr.push(labels[i].innerHTML)
labels[i].classList.add('fontBlue')
}else {
isCheckAll = false
labels[i].classList.remove('fontBlue')
}
}
all.checked = isCheckAll
isCheckAll ? sp.classList.add('fontBlue') : sp.classList.remove('fontBlue')
console.log(arr)
if(arr.length > 0) {
arr1.style.display = 'block'
tag1.style.display = "block"
tag1.innerHTML = arr[0]
console.log(tag1);
if(arr.length>1) {
tag2.style.display = "block"
tag2.innerHTML = arr[1]
console.log(tag2);
}else {
tag2.style.display = "none"
}
}else {
arr1.style.display = 'none'
tag1.style.display = "none"
tag2.style.display = "none"
}
arr1.innerHTML = `+${arr.length}`
}
function checkAll() {
sp.classList.add('fontBlue')
// 取消复选框选中,字体颜色恢复
if (all.checked === false) {
sp.classList.remove('fontBlue')
}
for (let i = 0; i < checkboxs.length; i++) {
// 全选操作
console.log(all.checked);
checkboxs[i].checked = all?.checked
}
}