用jquery ul li 实现select功能

用老框架时经常会用到原生的select选择器，但是样式难修改、很难达到用户需求，这时候就有ul li标签结合jquery实现下拉选择功能，自定义样式

html

<div class="select_wrap">
           <ul id="select">
               <li>
                   <div class="select-head">
                       <span class="select-head-cont"></span>
                       <span class="select-icon"><img class="icon_arrow" src="/images/exhibition/down.png"></span>
                   </div>
                   <ul class="option">
                       <li id="54" class="option-item">2022</li>
                       <li id="55" class="option-item">2021</li>
                       <li id="56" class="option-item">2020</li>
                       <li id="57" class="option-item">2019</li>
                       <li id="58" class="option-item">2018</li>
                       <li id="59" class="option-item">2017</li>
                       <li id="60" class="option-item">2016</li>
                       <li id="61" class="option-item">2015</li>
                   </ul>
               </li>
           </ul>
       </div>

css

@font-face {
    font-family: HYKaiTiS;
    src: url("./HYKaiTiS.ttf");
}

* {
    margin: 0;
    padding: 0;
}

.select_wrap{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 200px;
}
li {
    list-style: none;
}

#select {
}

.select-head {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 190px;
    font-size: 12px;
    cursor: pointer;
    padding: 12px 0;
    text-align: center !important;
    box-sizing: border-box;
    background: url("/images/exhibition/select_bg.png") no-repeat center center;
}
.select-head .select-head-cont {
    display: inline-block;
    width:65%;
    font-size: 21px;
    font-family: HYKaiTiS;
    font-weight: 400;
    color: #FFFFFF;
    text-align: end;
    padding-top: 5px;
}
.select-head .select-icon {
    padding-top: 5px;
    text-align: center;
    width:20% ;
}

.option {
    box-sizing: border-box;
    width: 160px;
    display: none;
    font-size: 21px;
    font-family: HYKaiTiS;
    font-weight: 400;
    color: #212121;
    margin:0 auto;
    padding: 20px 0;
    background-image: url("/images/exhibition/down_option_bg.png");
    width: 80%;
    height: 100%;
    background-size: 100% 100%;
}
.option .option-item {
    text-align: center;
    margin-bottom: 0;
    line-height: 150%;
    padding-left: 5px;
}
.option-item:hover {
    /*background: #b7aeaf !important;*/
    /*color: #fff !important;*/
    font-size: 26px;
    font-weight: 600;
}

js

let isOpen=false

let value=''

// 阻止冒泡事件发生
function stopPropagation(e) {
    if (e.stopPropagation)
        e.stopPropagation(); //停止冒泡 非ie
    else
        e.cancelBubble = true; //停止冒泡 ie
}
// 点击select-head时，select出现
$('.select-head').on('click', function(e) {
    stopPropagation(e);
    if(isOpen){
        $('.option').css('display', 'none');
        isOpen=false
        $('.icon_arrow').attr("src","/images/exhibition/down.png")
    }else {
        $('.option').css('display', 'block');
        isOpen=true
        $('.icon_arrow').attr("src","/images/exhibition/up.png")
    }
})

// 点击其他地方时，select会收起来
$(document).on('click', function(event) {
    if(isOpen){
        $('.option').css('display', 'none');
        isOpen=false
        $('.icon_arrow').attr("src","/images/exhibition/down.png")
    }
})

var selectHeadCont = document.getElementsByClassName('select-head-cont');
var optionItem = document.getElementsByClassName('option-item');

/*默认是第一个选项*/
selectHeadCont[0].innerHTML = optionItem[0].innerHTML;
// value=optionItem[0].innerHTML
value=$('ul.option li:first').attr('id')
optionItem[0].setAttribute('style', 'font-size: 26px; font-weight:600');

/*点击选项后出现在下拉框*/
var len = optionItem.length;
for (var i = 0; i < len; i++) {
    optionItem[i].index = i;
    optionItem[i].addEventListener('click', function() {
        selectHeadCont[0].innerHTML = optionItem[this.index].innerHTML;
        // 初始化所有optionItem背景样式
        for (var k = 0; k < len; k++) {
            optionItem[k].setAttribute('style', 'color:#333333');
        }
        // 给选中的optionItem添加背景样式
        optionItem[this.index].setAttribute('style', 'font-size: 26px; font-weight:600');
        $('.option').css('display', 'none');
    }, false);
}

$('.option').click(function(e){
    console.log(333333333,e.target.id);
    value=e.target.id
});

实现效果