ul 加 li 实现 select 下拉选功能

由于 select 没有选中事件（onchange 事件在内容改变时才会触发，选择同一个条目不会触发），只好用其他控件来实现。

<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Select</title>
    <style>
        .select-container {
            position: relative;
        }

        .select-container input {
            width: 240px;
            height: 24px;

            margin-top: 15px;
            line-height: 24px;

            text-indent: 5px;
        }

        .select-container span {
            /* 定位至 input 尾部 */
            position: absolute;
            top: 20px;
            left: 220px;

            /* 屏蔽点击事件 */
            pointer-events: none;
        }

        .select-container ul {
            /* 定位至 input 下面 */
            position: absolute;
            top: 28px;
            left: 0px;

            padding: 0;

            /* 显示在 input 上面 */
            z-index: 1;

            width: 242px;

            /* 默认隐藏 */
            display: none;
            list-style: none;

            /* 边框 */
            border: 1px solid #007ACC;
        }

        .select-container li a {
            /* 使背景色占满一行 */
            display: inline-block;
            width: 100%;

            color: #000000;
            text-indent: 5px;

            /* 默认背景色 */
            background: #fff;

            /* 去掉下划线 */
            text-decoration: none;
        }

        .select-container li a:hover {
            color: #fff;
            background: #1F92E4;
        }
    </style>
</head>
<body>
    <div class="select-container">
        <span>▼</span>
        <input type="text" readonly="readonly" onfocus="this.nextSibling.nextSibling.style.display='block';"
            onblur="var t=this;setTimeout(()=>{t.nextSibling.nextSibling.style.display='none';},150);" />
        <ul>
            <li onclick="this.parentNode.previousSibling.previousSibling.value=this.innerText;">
                <a href="http://www.baidu.com" target="_blank">测试1</a>
            </li>
            <li onclick="this.parentNode.previousSibling.previousSibling.value=this.innerText;">
                <a href="javascript:;">测试2</a>
            </li>
            <li onclick="this.parentNode.previousSibling.previousSibling.value=this.innerText;">
                <a href="javascript:;">测试3</a>
            </li>
            <li onclick="this.parentNode.previousSibling.previousSibling.value=this.innerText;">
                <a href="javascript:;">测试4</a>
            </li>
        </ul>
    </div>

    <div class="select-container">
        <span>▼</span>
        <input type="text" readonly="readonly" onfocus="this.nextSibling.nextSibling.style.display='block';"
            onblur="var t=this;setTimeout(()=>{t.nextSibling.nextSibling.style.display='none';},150);" />
        <ul>
            <li onclick="this.parentNode.previousSibling.previousSibling.value=this.innerText;">
                <a href="http://www.baidu.com" target="_blank">测试1</a>
            </li>
            <li onclick="this.parentNode.previousSibling.previousSibling.value=this.innerText;">
                <a href="javascript:;">测试2</a>
            </li>
            <li onclick="this.parentNode.previousSibling.previousSibling.value=this.innerText;">
                <a href="javascript:;">测试3</a>
            </li>
            <li onclick="this.parentNode.previousSibling.previousSibling.value=this.innerText;">
                <a href="javascript:;">测试4</a>
            </li>
        </ul>
    </div>
</body>
<script>
    window.onload = function () {
        var list = document.getElementsByClassName('select-container');
        for (var i = 0; i < list.length; i++) {
            list[i].children[1].value = list[i].children[2].children[0].innerText.trim();
        }
    }
</script>
</html>

效果

https://codepen.io/pen

https://c.runoob.com/front-end/61

https://www.cnblogs.com/ooo0/p/6278102.html

posted @ 2019-05-23 18:40  江湖小小白  阅读(7759)  评论(0)  编辑  收藏  举报