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>