CSS/JS ul li自定义下拉框

 第一种写法

HTML代码

 <div class="select-company model-select-box">
       <div class="model-select-text" value=""> 请选择:</div>
       <b class="bg1"></b>
        <ul class="model-select-option">
            <li data-option="1" class="selected">科比特集团</li>
            <li data-option="2">娃哈哈集团</li>
            <li data-option="3">百胜集团</li>
        </ul>
  </div>

 

CSS代码

/*下拉框*/

.select-company{
    margin-left: 10px;
    border: 1px solid #00D0FF;
    background-color: #032240;
    color: #00D0FF;
    text-align: center;
    line-height: 34px;
    float: left;
    margin-right: 20px;
    text-indent: 5px;
    position: relative;
    box-sizing: border-box;
}
.model-select-option{
    position: relative;
    z-index: 2;
}

.model-select-box {
    border: 1px solid #00D0FF;
    width: 94px;
    height: 24px;
    line-height: 24px;
    float: left;
    margin-right: 20px;
    text-indent: 5px;
    position: relative;
    font-size: 14px;
    box-sizing: border-box;
    padding: 0 3px 3px 0;
}

.model-select-text {
    height: 23px;
    text-align: left;
    /*padding-right: 27px;*/
    cursor: pointer;
    /* -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none; */
}

.model-select-option {
    display: none;
    position: absolute;
    background: #fff;
    width: 100%;
    left: -1px;
    border: 1px solid #00D0FF;
    border-top-width: 0;
}

.model-select-option li {
    height: 30px;
    line-height: 30px;
    text-align: left;
    color: #00D0FF;
    background-color: #032240;
    cursor: pointer;
}

.model-select-option li.selected {
    background: #06C;
    color: #fff;
}

/* 小三角 */
.bg1 {
    position: absolute;
    top: 9px;
    right: 3px;
    border-width: 6px;
    border-style: solid;
    border-color: #00b1e2 transparent transparent transparent;
}

 

 

JS代码

   $(function () {
            // 下拉框
            function selectModel() {
                let $box = $('div.model-select-box');
                let $option = $('ul.model-select-option', $box);
                let $txt = $('div.model-select-text', $box);
                let speed = 10;
                let $bg = $('b.bg1',$box)


                // 点击小三角
                $bg.click(function(){
                    $option.not($(this).siblings('ul.model-select-option')).slideUp(speed, function () {
                    });
                    $(this).siblings('ul.model-select-option').slideToggle(speed, function () {
                        // int($(this));
                    });
                    return false;
                })
                /*
                 * 单击某个下拉列表时，显示当前下拉列表的下拉列表框
                 * 并隐藏页面中其他下拉列表
                 */
                $txt.click(function (e) {
                    if ($('.model-select-option').css('display') === 'block'){
                        $box.css('border','1px solid #00D0FF')
                    } else {
                        $box.css('border-bottom','0')
                    }

                    $option.not($(this).siblings('ul.model-select-option')).slideUp(speed, function () {
                    });
                    $(this).siblings('ul.model-select-option').slideToggle(speed, function () {
                        // int($(this));
                    });
                    return false;
                });





                //点击选择，关闭其他下拉
                /*
                 * 为每个下拉列表框中的选项设置默认选中标识 data-selected
                 * 点击下拉列表框中的选项时，将选项的 data-option 属性的属性值赋给下拉列表的 data-value 属性，并改变默认选中标识 data-selected
                 * 为选项添加 mouseover 事件
                 */
                $option.find('li').each(function(index,element){
                    // console.log($(this) + '1');
                    if($(this).hasClass('selected')){
                        $(this).parent('.model-select-option').siblings('.model-select-text').text($(this).text())
                    }

                    $(this).mousedown(function(){
                        if ($('.model-select-option').css('display') === 'block'){
                            $box.css('border','1px solid #00D0FF')
                        } else {
                            $box.css('border-bottom','0')
                        }
　　　　　　　　　　　　　　//把函数放入确认或者取消按钮点击事件中 就会在点击以后才上弹

　　　　　　　　　　　　　　let self = this;
　　　　　　　　　　　　　　confirmTxt = function(){
                        $(self).parent().siblings('div.model-select-text').text($(self).text())
                            .attr('value', $(self).attr('data-option'));
　　　　　　　　　　　　　　}
                        $option.slideUp(speed, function () {
                        });
                        $(this).addClass('selected').siblings('li').removeClass('selected');
                        return false;
                    })

                    $(this).on('mouseover',function(){
                        $(this).addClass('selected').siblings('li').removeClass('selected');
                    })
                })
                //点击文档，隐藏所有下拉
                $(document).click(function (e) {
                    if ($('.model-select-option').css('display') === 'block'){
                        $box.css('border','1px solid #00D0FF')
                    }
　　　　　　　　　　//把函数放入确认或者取消按钮点击事件中 就会在点击以后才上弹

　　　　　　　　　　slideUpBox = function () {
 　　　　　　　　　　   $option.slideUp(speed, function () {
  　　　　　　　　　　  });
　　　　　　　　　　}

}); } selectModel(); })

 

遇到的bug ： layui中 td设置了opacity：0.7 导致下拉框无法拉出. 

 

第二种写法

<!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;
            padding: 0;
        }

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

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

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

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

            width: 242px;

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

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

        .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>