自定义select

因为select 在个别android手机上不能兼容，所以自己写一个。

原理就是：1、点击input按钮显示弹出选择框，再点击选择框隐藏。

    2、input 的value就等于选择框里面选择的值。

    3、再把选择框隐藏。

html代码:

//点击的input按钮

<input type="button" id="zdy-butt" value="" />  

//选择框  

<div class="rule-bg" style="overflow: hidden;" id="where-color">
    <div class="rule-box"  id="where-color-onson">
       <ul class="where-classname default_list" style="color: #FFFF00;max-height: 300px;">
             <li class="form-control"><label>ccc</label><span><img src="img/j-select.png"/></span></li>
         <li class="form-control"><label>bbb</label><span><img src="img/j-select.png"/></span></li>
         <li class="form-control"><label>aaa</label><span><img src="img/j-select.png"/></span></li>
             <li class="form-control"><label>ddd</label><span><img src="img/j-select.png"/></span></li>
       </ul>
    </div>
</div>

js代码:

//点击按钮判断选择框状态是隐藏还是显示

       $("#zdy-butt").on("click", function() {
      var e = $("#where-color").css("display");
     "none" == e ? ($("#where-color").show()):($("#where-color").hide());
       });

//input 的值默认为第一个选择框的值
$(function(){
$("#zdy-butt").val($("#where-color-onson div div:eq(0)").children("label").text());
});

//input 的值等于下拉框选择的值
$("#where-color-onson ul li").on("click",function() {
$("#zdy-butt").val($("#where-color-onson ul li:eq("+$(this).index()+")").children("label").text());setTimeout(hidecolor,500);

});

function hidecolor(){
$("#where-color").hide();
}