移動端-模擬下拉列表

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

 

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