移动端-模拟下拉列表

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

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

最终效果如图：

html结构如下：

1 <div class="select-area">
2     <span class="select-value"></span>
3     <select>
4        <option>甘肃</option>
5        <option>兰州</option>
6     </select>
7 </div>

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

相应的样式如下：

 1 .select-area{
 2   position: relative;
 3   overflow: hidden;
 4 }
 5 .select-area select{
 6   position: absolute;
 7   left: 0;
 8   top: 0;
 9   opacity: 0;
10   width: 100%;
11 }

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

1 $(".select-area .select-value").each(function(){
2                 if( $(this).next("select").find("option:selected").length != 0 ){
3                     $(this).text( $(this).next("select").find("option:selected").text() );
4                 }
5             });
6             $(".select-area select").change(function(){
7                 var value = $(this).find("option:selected").text();
8                 $(this).parent(".select-area").find(".select-value").text(value);
9             });

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