原生js實現(xiàn)下拉多選框組件完整代碼

更新時間：2024年01月08日 15:12:15 作者：奶粉罐沒粉

這篇文章主要給大家介紹了關(guān)于原生js實現(xiàn)下拉多選框組件的相關(guān)資料,工作中碰到的需求,模仿原生下拉框的樣式,可下拉多選,文中通過代碼介紹的非常詳細,需要的朋友可以參考下

<!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')
    // 圖標旋轉(zhuǎn)
    round.style.transform = 'rotate(0deg)'
})
// 鼠標離開
box.addEventListener('mouseleave', function () {
    // 隱藏下拉列表
    list.style.display = 'none'
    // 外框線顏色恢復(fù)
    input.classList.remove('blue')
    // 圖標恢復(fù)
    round.style.transform = 'rotate(180deg)'
})
// 獲取元素ul
let ul = document.querySelector('.list-ul')
// 新建數(shù)組對象
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中，通過循環(huán)遍歷渲染完成
for (let i = 0; i < optionArr.length; i++) {
    // 有幾條數(shù)據(jù)就新建幾個小li
    let li = document.createElement('li')
    // 新建復(fù)選框及l(fā)abel元素
    let input1 = document.createElement('input')
    let label = document.createElement('label')
    // 修改表單屬性為復(fù)選框
    input1.type = 'checkbox'
    // 給表單添加id屬性
    input1.id = `${optionArr[i].id}`
    // 給第一個li的input和label設(shè)置class屬性，其他的li設(shè)置相同的input和label設(shè)置class屬性
    if (i === 0) {
        input1.setAttribute("class", 'all');
        label.setAttribute("class", 'sp');
    } else {
        input1.setAttribute("class", 'check');
        label.setAttribute("class", 'wz');
    }
    // 給label修改文字內(nèi)容，值為對象的name屬性值
    label.innerText = `${optionArr[i].name}`
    // 給label設(shè)置for屬性，值為對象的id屬性值
    label.setAttribute("for", `${optionArr[i].id}`);
    //復(fù)選框及l(fā)abel元素追加給li
    li.appendChild(input1)
    li.appendChild(label)
    // 將li追加給ul
    ul.appendChild(li)
}
// 選中的數(shù)組
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的復(fù)選框
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
// 循環(huán)遍歷所有l(wèi)i,添加點擊事件
for (let i = 0; i < checkboxs.length; i++) {
    // +1是因為li的偽數(shù)組長度比checkboxs和checkboxs大1
    checkboxs[i].addEventListener('click', function () {
        updateCheckStatus()
    })
}

// 獲取新建的class為all的復(fù)選框
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')
    // 取消復(fù)選框選中，字體顏色恢復(fù)
    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
    }
}

總結(jié)

到此這篇關(guān)于原生js實現(xiàn)下拉多選框組件的文章就介紹到這了,更多相關(guān)原生js下拉多選框組件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: