一个模拟select

在PC端可以代替普通的select控件，因为普通的select控件有限制，显示值无法使用html标签，在手机端的话显示效果不太好，还是使用picker之类的控件比较合适

１、js

$(function() {
  /**
   * 模拟select
   **/
  $(".select-header").click(function() {
    $(this)
      .parent()
      .siblings(".select-box")
      .find(".select-content")
      .slideUp("fast");
    if (
      $(this)
        .siblings(".select-content")
        .is(":hidden")
    ) {
      $(this).addClass("select-arrow");
      $(this)
        .siblings(".select-content")
        .slideDown("fast");
      var evt = new Object();
      if (typeof window.event == "undefined") {
        //如果是火狐浏览器
        evt = arguments.callee.caller.arguments[0];
      } else {
        evt = event || window.event;
      }
      evt.cancelBubble = true;
    } else {
      $(this).removeClass("select-arrow");
      $(this)
        .siblings(".select-content")
        .slideUp("fast");
      //去除事件冒泡
      var evt = new Object();
      if (typeof window.event == "undefined") {
        //如果是火狐浏览器
        evt = arguments.callee.caller.arguments[0];
      } else {
        evt = event || window.event;
      }
      evt.cancelBubble = true;
    }
  });
  $(document).click(function() {
    $(".select-header").removeClass("select-arrow");
    $(".select-content").slideUp("fast");
  });
  $(".select-content li").on("click", function() {
    $(this)
      .parent()
      .siblings(".select-header")
      .removeClass("select-arrow");
    $(this)
      .parent()
      .siblings(".select-header")
      .html(
        $(this)
          .html()
          .myReplace('"', "")
      )
      .end()
      .slideUp("fast");
    $(this)
      .parent()
      .siblings(".select-header")
      .attr("data-values", $(this).attr("data-values")); //data('values',$(this).data('values'));
    renderTxlBind();
  });
  $(".select-content li").hover(
    function() {
      $(this).css("background-color", "#cfcfcf");
    },
    function() {
      $(this).css("background-color", "#fff");
    }
  );
});
String.prototype.myReplace = function(f, e) {
  //f替换成e
  var reg = new RegExp(f, "g"); //创建正则RegExp对象
  return this.replace(reg, e);
};

2、css

/**
* 模拟select
**/
.select-box {
    position: relative;
    float: left;
    margin-right: 8px;
}

.select-moni .select-header {
    height: 42px;
    background-position: 95px 15px;
    line-height: 42px;
    text-indent: 14px;
    font-size: 16px;
    color: #a9a9a9;
    cursor: pointer;
    overflow: hidden;
    text-align: right;
    background-color: white;
    border: none;
    width: 100%;
    padding-right: 15px
}

.select-moni .select-arrow {
    background-position: 95px -9px;
}

.select-moni .select-content {
    position: absolute;
    top: 38px;
    left: 0;
    z-index: 99;
    display: none;
    background-color: #f9f9f9;
    width: 100%;
    border: 1px solid lightgray;

}

.select-moni .select-content li {
        height: 42px;
        margin: 0;
        border-bottom: 1px solid #c1c1c1;
        line-height: 42px;
        text-indent: 14px;
        font-size: 16px;
        color: #a9a9a9;
        cursor: pointer;
        width: 100%;
        text-align: right;
        padding-right: 10px;
        background-color: rgb(255, 255, 255);
}
ol, ul {
    list-style: none;
}

3、html代码

<div class="select-box select-shenpiren" style="z-index: 1;position:absolute;top:0px;bottom:42px;left:100px;right:15px;height:42px">
    <div class="select-header select-arrow" id="drpPerson" data-values="8871"><ww-open-data type="userName" openid="LiSi"></ww-open-data></div>
    <ul class="select-content" style="display: block;">
        <li data-values="1" style="background-color: rgb(255, 255, 255);"><ww-open-data type="userName" openid="ZhangSan"></ww-open-data></li>
        <li data-values="2" style="background-color: rgb(255, 255, 255);"><ww-open-data type="userName" openid="LiSi"></ww-open-data></li>
        <li data-values="3" style="background-color: rgb(255, 255, 255);"><ww-open-data type="userName" openid="WangWu"></ww-open-data></li>
    </ul>
</div>