jQ模拟下拉框以及向下三角

界面;

问题：因为select自带得option不能自适应宽度，意味着option宽度有时候会比select宽度长，如下图：

解决：自己模拟写一个select带向下三角得下拉框；

原理：

1、我这里用的div当作一个框，里面包含下拉框选中内容和三角形（三角形是靠css实现得)

2、用ul/li模拟一个显示隐藏得下拉框；

3、jq获取元素以及显示隐藏元素都比较方便，原生也差不多；

4、js事件比如下拉框得鼠标移入移出以及选中元素得样式根据不同需求定，我这里是统一之前的select框样式来实现得，仅供参考；

难点：

1、向下三角形得css实现

2、动态往div框里添加所选择得下拉框得值时，用到jq得text方法的话，会连里面的三角形标签一起替换掉

html

<div class="ip">
    <div class="myCanvas"></div>
</div>
<ul class="ipWrap" >
    <li value="${i.value}" title="${i.desc}" style="width: 100%" >${i.desc}</li>
</ul> 

css

.ip{
    //width: 60%;
    //-ms-flex: 1;
   // flex: 1;
   position: relative;
    text-indent: 5px;
    margin-top: 25px;
    height: 33px;
    border: 1px solid #ccc;
    line-height: 33px;
    border-radius: 5px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.ipWrap{
    position: absolute;
    background: #ffffff;
    border: 1px solid #ccc;
    li{
        float:left;
        line-height:40px;
        text-align:center;
}
.liActive{
    color:#ffffff;
    background-color:#0088FF;
}
//三角形
.myCanvas{
    width: 0;
    height: 0;
    position: absolute;
    bottom: 10%;
    right: 3%;
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    border-top: 6px solid black;
}

 js

{//点击li添加样式
    event: 'click',
    selector: 'li',
    callback: function(e){
        //添加单独的样式
        $(e).addClass('liActive').siblings().removeClass('liActive');
        let text = $(e).attr('title')
        $('.ip').text(text).attr('title',text);
        this.actions.hideIpSelect();
        $('.myCanvas').css('bottom','10%');
    }
},
{//鼠标移入li
    event: 'mouseover',
    selector: 'li',
    callback: function(e){
        $(e).addClass('liActive').siblings().removeClass('liActive');
    }
},
{
    event: 'mouseout',
    selector: 'li',
    callback: function(e){
        $(e).removeClass('liActive');
    }
},


// 模拟得下拉框：点击三角形和div
clickIpSelect(){
         $('.ip,.myCanvas').on('click',()=>{
           console.log('ip/三角被点击了')
      this.actions.showIpSelect();
              $('.myCanvas').css('bottom','47%');
             let lis = $('.ipWrap li');
             lis.each((index,item)=>{
         if ($(item).attr('title')==$('.ip').text()) {
                      $(item).addClass('liActive')
         }
             })

   })

},
hideIpSelect(){
   $('.ipWrap').hide()
},
showIpSelect(){
          $('.ipWrap').show()
},