js手機移動端選擇插件 mobileSelect.js

一、mobileSelect獲取方法

　　mobileSelect支持單選、多級聯動、自定義回調函數、二次渲染。最新版本下載地址[2017-09-21更新]： https://github.com/onlyhom/mobileSelect.js 

二、特性
　　1、原生js移動端選擇控件，不依賴任何庫
　　2、可傳入普通數組或者json數組
　　3、可根據傳入的參數長度，自動渲染出對應的列數，支持單項到多項選擇
　　4、自動識別是否級聯
　　5、選擇成功后，提供自定義回調函數callback() 返回當前選擇索引位置、以及選擇的數據（數組/json）
　　6、每次手勢滑動結束后，也提供一個回調函數transitionEnd() 返回當前選擇索引位置、以及選擇的數據（數組/json）
　　7、能夠在已經實例化控件后，提供update函數，傳其他參數再次渲染
　　8、提供重定位函數

三、動態圖

 

四、使用方法

 

<link rel="stylesheet" type="text/css" href="css/mobileSelect.css">
<script src="js/mobileSelect.js" type="text/javascript"></script>

 

五、示例

<div class="weui-cell">
    <div class="weui-cell__hd">
        <label for="" class="weui-label width-40"><span style="color: #ff0000;">*</span>房屋類型</label>
    </div>
    <div class="weui-cell__bd">
        <input class="weui-input" type="text" id="house_type" name="house_type" value="" required readonly>
    </div>
</div>

var houseTypeObj = new MobileSelect({
      trigger: '#house_type',
      title: '請選擇房屋類型',
            wheels: [
                {data:['小區房','自建房','商品房']}
      ],
      position:[0],
      callback:function(indexArr, data){
            $("#house_type").val(data[0]);
            $("#house_type").blur();
      }
});