JavaScript实现下拉列表select控件

一.html部分

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="menu">
        <p>下拉菜单</p>
        <span>html</span>
        <ul>
            <li class="active">html</li>
            <li>css</li>
            <li>js</li>
        </ul>
    </div>
</body>

</html>

二.css部分

　　　　　#menu {
            width: 200px;
            height: 60px;
            line-height: 30px;
            margin: 20px auto;
            text-align: center;
        }

        #menu p {
            height: 30px;
            line-height: 30px;
        }

        #menu span {
            display: block;
            width: 200px;
            line-height: 30px;
            border: solid 1px black;
        }

        #menu ul {
            margin: 0;
            padding: 0;
            list-style: none;
            overflow: auto;
            border: solid 1px black;
            border-top: none;
            display: none;
            width: 100%;
            height: 90px;
        }

        #menu ul li {
            width: 100%;
            height: 30px;
        }

        #menu ul li.active {
            background: #35f;
            color: #fff;
        }

三.JavaScript部分

1.初始化

        var ospan = document.querySelector("#menu span");
        var oul = document.querySelector('#menu ul');
        var ali = document.querySelectorAll("#menu ul li");
        var index = 0;                              //索引
        var temporary = index;                      //临时存放索引
        var state = 0;                              //ul转态 0为隐藏，1为显示
        for (var i = 0; i < ali.length; i++) {      //初始化li
            ali[i].className = "";
        }
        
        ospan.innerHTML = ali[index].innerHTML;     //显示默认选中的li内容

2.点击下拉列表主框

ospan.onclick = function (eve) {            //点击显示ul
            var e = eve || window.event;
            stopBubble(e);
            if (state == 0) {
                for (var j = 0; j < ali.length; j++) {
                    ali[j].className = "";
                }
                ali[index].className = "active";
                oul.style.display = "block";        //设置为显示
                state = 1;
            } else {
                oul.style.display = "none";
                state = 0;
            }
        }

3.点击ul内区域

for (let i = 0; i < ali.length; i++) {      //点击下拉框内事件
            ali[i].onmouseover = function () {
                index = i;
                for (var j = 0; j < ali.length; j++) {
                    ali[j].className = "";
                }
                ali[i].className = "active";
                ospan.innerHTML = ali[i].innerHTML;
            }
            ali[i].onclick = function () {
                ospan.innerHTML = ali[i].innerHTML;
                index = i;
                temporary = index;                  //选中li的索引赋值给临时索引
            }
        }

4.键盘事件

document.onkeydown = function (eve) {       //键盘事件
            if (state == 1) {
                var e = eve || window.event;
                var code = e.which || e.keyCode;
                if (code == 38) {                   //方向键：上
                    if (index == 0) {
                        index = 0;
                    }
                    else {
                        index--;
                        ospan.innerHTML = ali[index].innerHTML;
                    }
                    for (var i = 0; i < ali.length; i++) {
                        ali[i].className = "";
                    }
                    ali[index].className = "active";
                }
                if (code == 40) {               //方向键：下
                    if (index == 0) {
                        index = 0;
                    }
                    if (index < ali.length - 1) {
                        index++;
                        ospan.innerHTML = ali[index].innerHTML;
                    }
                    for (var i = 0; i < ali.length; i++) {
                        ali[i].className = "";
                    }
                    ali[index].className = "active";
                }
                if (code == 13) {               //enter回车键
                    oul.style.display = "none";
                    state = 0;
                    ospan.innerHTML = ali[index].innerHTML;
                    temporary = index;
                }
            }

        }

5.点击下拉框外区域

document.onclick = function () {            //鼠标点击下拉框外事件
            oul.style.display = "none";             //ul隐藏
            state = 0;                              //状态码改为0
            index = temporary;                      //临时存放索引
            ospan.innerHTML = ali[index].innerHTML;
        }

6.阻止冒泡

//阻止冒泡
        function stopBubble(e) {
            if (e.stopPropagation) {
                e.stopPropagation();
            } else {
                e.cancelBubble = true;
            }
        }

完整代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #menu {
            width: 200px;
            height: 60px;
            line-height: 30px;
            margin: 20px auto;
            text-align: center;
        }

        #menu p {
            height: 30px;
            line-height: 30px;
        }

        #menu span {
            display: block;
            width: 200px;
            line-height: 30px;
            border: solid 1px black;
        }

        #menu ul {
            margin: 0;
            padding: 0;
            list-style: none;
            overflow: auto;
            border: solid 1px black;
            border-top: none;
            display: none;
            width: 100%;
            height: 90px;
        }

        #menu ul li {
            width: 100%;
            height: 30px;
        }

        #menu ul li.active {
            background: #35f;
            color: #fff;
        }
    </style>
</head>

<body>
    <div id="menu">
        <p>下拉菜单</p>
        <span>html</span>
        <ul>
            <li class="active">html</li>
            <li>css</li>
            <li>js</li>
        </ul>
    </div>
    <script>
        //阻止冒泡
        function stopBubble(e) {
            if (e.stopPropagation) {
                e.stopPropagation();
            } else {
                e.cancelBubble = true;
            }
        }
        //下拉列表
        var ospan = document.querySelector("#menu span");
        var oul = document.querySelector('#menu ul');
        var ali = document.querySelectorAll("#menu ul li");
        var index = 0;                              //索引
        var temporary = index;                      //临时存放索引
        var state = 0;                              //ul转态 0为隐藏，1为显示
        for (var i = 0; i < ali.length; i++) {      //初始化li
            ali[i].className = "";
        }

        ospan.innerHTML = ali[index].innerHTML;     //显示默认选中的li内容
        ospan.onclick = function (eve) {            //点击显示ul
            var e = eve || window.event;
            stopBubble(e);
            if (state == 0) {
                for (var j = 0; j < ali.length; j++) {
                    ali[j].className = "";
                }
                ali[index].className = "active";
                oul.style.display = "block";        //设置为显示
                state = 1;
            } else {
                oul.style.display = "none";
                state = 0;
            }
        }
        document.onclick = function () {            //鼠标点击下拉框外事件
            oul.style.display = "none";             //ul隐藏
            state = 0;                              //状态码改为0
            index = temporary;                      //临时存放索引
            ospan.innerHTML = ali[index].innerHTML;
        }

        for (let i = 0; i < ali.length; i++) {      //点击下拉框内事件
            ali[i].onmouseover = function () {
                index = i;
                for (var j = 0; j < ali.length; j++) {
                    ali[j].className = "";
                }
                ali[i].className = "active";
                ospan.innerHTML = ali[i].innerHTML;
            }
            ali[i].onclick = function () {
                ospan.innerHTML = ali[i].innerHTML;
                index = i;
                temporary = index;                  //选中li的索引赋值给临时索引
            }
        }
        document.onkeydown = function (eve) {       //键盘事件
            if (state == 1) {
                var e = eve || window.event;
                var code = e.which || e.keyCode;
                if (code == 38) {                   //方向键：上
                    if (index == 0) {
                        index = 0;
                    }
                    else {
                        index--;
                        ospan.innerHTML = ali[index].innerHTML;
                    }
                    for (var i = 0; i < ali.length; i++) {
                        ali[i].className = "";
                    }
                    ali[index].className = "active";
                }
                if (code == 40) {               //方向键：下
                    if (index == 0) {
                        index = 0;
                    }
                    if (index < ali.length - 1) {
                        index++;
                        ospan.innerHTML = ali[index].innerHTML;
                    }
                    for (var i = 0; i < ali.length; i++) {
                        ali[i].className = "";
                    }
                    ali[index].className = "active";
                }
                if (code == 13) {               //enter回车键
                    oul.style.display = "none";
                    state = 0;
                    ospan.innerHTML = ali[index].innerHTML;
                    temporary = index;
                }
            }

        }
    </script>
</body>

</html>