移動端-模擬下拉列表

在移動端使用原生的下拉列表（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);
            });

 

最終效果就是如上圖顯示的手機上的效果。