脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → 原生js下拉多选框组件

原生js实现下拉多选框组件完整代码

 更新时间：2024年01月08日 15:12:15   作者：奶粉罐没粉  
这篇文章主要给大家介绍了关于原生js实现下拉多选框组件的相关资料,工作中碰到的需求,模仿原生下拉框的样式,可下拉多选,文中通过代码介绍的非常详细,需要的朋友可以参考下

<!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" rel="external nofollow" >
    <link rel="stylesheet" href="./iconfont/iconfont.css" rel="external nofollow" >
</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
    }
}

总结 

到此这篇关于原生js实现下拉多选框组件的文章就介绍到这了,更多相关原生js下拉多选框组件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

最新评论