纯js模拟下拉框

<div class="selects" id="selects">
          <h4 class="label" id="label"  @click = showData()>请选择适配器</h4>
          <ul id="ul-option" style="display: none">
            <li v-for="adapter in adapters" v-model="adapterSelected">
              <span style="float: left;margin:0px 4px;"><img v-if="!adapter.val" src="../../static/images/grey.png"><img v-if="adapter.val" src="../../static/images/green.png"></span>
              <span>{{adapter.ip}}</span>
            </li>
          </ul>
        </div>

<script>

   selectEvent(lis,num){
        var self = this;
        var oneli = lis[num];
        oneli.onmouseenter = function () {
          oneli.style.backgroundColor = '#3398FE';
          oneli.style.color = '#fff';
        }
        oneli.onmouseleave = function () {
          oneli.style.backgroundColor = '';
          oneli.style.color = '';
        }
        oneli.onclick = function () {
          document.getElementById('label').innerHTML = oneli.innerText;
          self.adapterSelected = oneli.innerText;
          oneli.parentNode.setAttribute('style',"display:none;");
        }
        num++;
        if(lis[num] != null || lis[num] != undefined){
          self.selectEvent(lis,num);
        }
      },
      showData(){
        var uls = document.getElementById('ul-option');
        uls.style.display = '';
        var lis = uls.getElementsByTagName('li');
        var num = 0;
        this.selectEvent(lis,num);
      },
</script>



<style>
    .selects{
    display: inline-block;
  }
  .label{
    color:#000;
    border: solid 1px #0eb1d7;
    background: url("../../static/images/select_icon.png") no-repeat scroll right center transparent;
    padding-right: 14px;
    height: 30px;
    line-height:30px;
    width: 121px;
  }
  #ul-option{
    color:#000;
    position:absolute;
    border:1px solid #51a4f7;
  }
  #ul-option li {
    background-color: #fff;
    width:135px;
    height: 20px;
    line-height: 20px;
  }
</style>