实现下拉选择的jquery方法

jquery实现下拉选择
DOM层代码：

 <div class="drop-down-select">
        <span class="label-name">项目类别：</span>
        <div class="selectBox">
            <i class="drop-down"></i>
            <span>xxx制造业</span>
            <ul style="display:none" class="selectItem">
                <li>yyy制造业</li>
                <li>zzz制造业</li>
                <li>hhh制造业</li>
            </ul>
        </div>
    </div>

css代码：

.drop-down-select{
     background:#1890ff;
     height: 200px;
     width: 200px;
     margin: 10px;
     border-radius: 4px;
     padding: 10px;
     box-sizing: border-box;
     .label-name{
         font-size: 12px;
         font-family: SourceHanSansCN-Bold, SourceHanSansCN;
         font-weight: bold;
         color: #FFFFFF;
         line-height: 18px;
     }
    .selectBox{
        width: 105px;
        height: 24px;
        line-height: 20px;
        border-radius: 2px;
        background:rgba(69, 255, 248, 0.8);
        text-align:center;
        box-sizing: border-box;
        display: inline-block;
        padding-left: 12px;
        margin-right: 10px;
        position: relative;
        cursor: pointer;
     span{
         color:#fff;
     }
     .drop-down{
         width: 7px;
         height: 4px;
         background:url("../img/drop-down.png") no-repeat;
         background-size:100% 100%;
         position: absolute;
         top: 10px;
         right: 5px;
     }
     .tranform {
        transform: translateY(-50%) rotate(180deg);
      }
      ul{
        width: 100%;
        display: none;
        position: absolute;
        box-shadow: 0px 0px 4px 0px rgba(69, 255, 248, 0.3);
        background: rgba(69, 255, 248, 0.2);
        border-radius: 0.1rem;
        top: 26px;
        left: 0;
        z-index: 999;
        box-sizing: border-box;
        li{
        text-align: center;
        font-size: 12px;
        color: #fff;
        }
      }
    }
 }

js代码：

$(function () {
            // 下拉选择
            $('.selectBox').click(function () {
                $(this).children('i').toggleClass('tranform')
                $(this).children('ul').slideToggle();
            })
            $('.selectItem>li').click(function () {
                let selectText = $(this).text()
                $(this).parent().siblings('span').text(selectText)
            })
        })

最终实现效果如下图所示：