移动端-模拟下拉列表

在移动端使用原生的下拉列表（select）会有自带的样式，想要做到自定义样式怎么办呢？

首先第一步会去掉默认样式：-webkit-appearance:none;这些对input下的各类型属性，如：type="date"，会去掉默认样式，但是这时候对select设置的边框，宽度或者是文字居中显示等等样式都不起作用。这时候就需要模拟select框了。因为select在移动端上会用到手机默认的弹框，所以还是要用到select标签。

最终效果如图：

html结构如下：

<div class="select-area">
    <span class="select-value"></span>
    <select>
       <option>甘肃</option>
       <option>兰州</option>
    </select>
</div>

select-value用来存储下拉框选中的值，隐藏select，然后利用JS控制显示的下拉框的值。

相应的样式如下：

 

.select-area{
  position: relative;
  overflow: hidden;  
}
.select-area select{
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  width: 100%;
}

接下来就是用到JS来控制选中值的显示了：

$(".select-area .select-value").each(function(){
                if( $(this).next("select").find("option:selected").length != 0 ){
                    $(this).text( $(this).next("select").find("option:selected").text() );
                }
            });
            $(".select-area select").change(function(){
                var value = $(this).find("option:selected").text();
                $(this).parent(".select-area").find(".select-value").text(value);
            });

最终效果就是如上图显示的手机上的效果。