mobiscroll是一款非常使用的移動端選擇控件，一般用來日期時間的選擇的多，其實從官網上可以看到它有很多方面的使用，這里就不一一介紹了，有興趣可以去官網上查閱一下 https://demo.mobiscroll.com/， 這里主要介紹實現二級聯動菜單treelist的使用。
1、html部分
1 <ul id="areaList" style="display:none;"> 2 <li> 3 <span data-id="1">北京</span> 4 <ul> 5 <li data-id="11">北京市</li> 6 </ul> 7 </li> 8 <li class="dw-sel"> 9 <span data-id="2" class="dw-sel">天津</span> 10 <ul> 11 <li data-id="21">天津市</li> 12 </ul> 13 </li> 14 <li> 15 <span data-id="3">上海</span> 16 <ul> 17 <li data-id="31">上海市</li> 18 </ul> 19 </li> 20 <li> 21 <span data-id="4">重慶</span> 22 <ul> 23 <li data-id="41">重慶市</li> 24 </ul> 25 </li> 26 <li> 27 <span data-id="5">河北省</span> 28 <ul> 29 <li data-id="51">石家庄</li> 30 <li data-id="52">唐山</li> 31 <li data-id="53">秦皇島</li> 32 <li data-id="54">邯鄲</li> 33 <li data-id="55">邢台</li> 34 <li data-id="56">保定</li> 35 <li data-id="57">張家口</li> 36 <li data-id="58">承德</li> 37 <li data-id="59">滄州</li> 38 <li data-id="510">廊坊</li> 39 <li data-id="511">衡水</li> 40 </ul> 41 </li> 42 <li> 43 <span data-id="6">山西省</span> 44 <ul> 45 <li data-id="61">太原</li> 46 <li data-id="62">大同</li> 47 <li data-id="63">陽泉</li> 48 <li data-id="63">長治</li> 49 <li data-id="64">晉城</li> 50 <li data-id="65">朔州</li> 51 <li data-id="66">晉中</li> 52 <li data-id="67">運城</li> 53 <li data-id="68">忻州</li> 54 <li data-id="69">臨汾</li> 55 <li data-id="610">呂梁</li> 56 </ul> 57 </li> 58 <li> 59 <span data-id="7">內蒙古區</span> 60 <ul> 61 <li data-id="71">呼和浩特</li> 62 <li data-id="72">包頭</li> 63 <li data-id="73">烏海</li> 64 <li data-id="74">赤峰</li> 65 <li data-id="75">通遼</li> 66 <li data-id="76">鄂爾多斯</li> 67 <li data-id="77">呼倫貝爾</li> 68 <li data-id="78">巴彥淖爾</li> 69 <li data-id="79">烏蘭察布</li> 70 <li data-id="710">興安盟</li> 71 <li data-id="711">錫林郭勒盟</li> 72 <li data-id="712">阿拉善盟</li> 73 </ul> 74 </li> 75 </ul> 76 <input type="hidden" name="province" value=""> 77 <input type="hidden" name="city" value=""> 78 <input type="hidden" name="arry" value="">
2、js部分
一些配置說明都備注在代碼后面，當然可以到官網查看更多的配置及api說明。
1 $('#areaList').mobiscroll().treelist({ 2 theme: 'android-holo-light',//樣式 3 lang: 'zh',//語言 4 display: 'bottom',//指定顯示模式 5 fixedWidth: [100,100],//2組滾動框的寬度 6 placeholder: '請選擇地區',//placeholder 7 inputClass:'ui-input', //為插件生成的input添加樣式 8 inputName:'111', 9 btnClass:'', //設置按鈕顯示的樣式 10 labels: ['省', '市'], 11 headerText:function(valueText){return "請選擇地區"},//選擇區域頭部 12 rows:5,//滾動區域內的行數 13 //showLabel:true,//是否顯示labels 14 onSelect:function(valueText,inst){ 15 16 }, 17 defaultValue: [0,1],//設置初始值 18 formatResult: function (array) { //返回自定義格式結果 19 province = $('#areaList>li').eq(array[0]).children('span'); 20 city = $('#areaList>li').eq(array[0]).find('ul li').eq(array[1]); 21 $("input[name='province']").val(province.attr('data-id')) 22 $("input[name='city']").val(city.attr('data-id')) 23 $("input[name='arry']").val(array) 24 return province.text() + ' ' + (city.text() == null ? "" : city.text()) 25 } 26 });
如果樣式需要調整的，我們也可以根據實際情況修改下css，以滿足需求。
最后提供一個百度網盤的下載地址 http://pan.baidu.com/s/1c1VLZKO 。