移動端-模擬下拉列表 - huangxi－IT工程師數位筆記本

文章出處

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