ul -- li 模擬select下拉框

在寫項目中 用到下拉框，一般用

 <select name="" id="">
     <option value="">1</option>
     <option value="">2</option>
     <option value="">3</option>
 </select>

但是select 在不同的瀏覽器中 樣式有些差別，所以用 ul  li 來模擬select 的功能。

 <div class="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>

 $(function () {
      /*
       * 模擬網頁中所有的下拉列表select
       */
      function selectModel() {
        var $box = $('div.model-select-box');
        var $option = $('ul.model-select-option', $box);
        var $txt = $('div.model-select-text', $box);
        var speed = 10;
        var $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) {
          $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(){
              $(this).parent().siblings('div.model-select-text').text($(this).text())
              .attr('value', $(this).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) {
          $option.slideUp(speed, function () {
          });
        });
        
      }
    
      selectModel();
    })

* {
      margin: 0;
      padding: 0;
    }

  

    body {
      font: 14px '微軟雅黑';
      color: #555;
      padding: 50px;
    }

    ul {
      list-style: none;
    }

    .model-select-box {
      width: 100px;
      height: 34px;
      line-height: 34px;
      border: 1px solid #000;
      float: left;
      margin-right: 20px;
      text-indent: 5px;
      position: relative;
      font-size: 18px;
      box-sizing: border-box
    }

    .model-select-text {
      height: 34px;
      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 #000;
    }

    .model-select-option li {
      height: 30px;
      line-height: 30px;
      color: #000;
      cursor: pointer;
    }

    .model-select-option li.selected {
      background: #06C;
      color: #fff;
    }

    /* 小三角 */
    .bg1{
    position: absolute;
    top:12px;
    right:5px;
    border-width: 6px;
    border-style: solid;
    border-color: #000 transparent transparent transparent;
}