mobiscroll是一款非常使用的移动端选择控件，一般用来日期时间的选择的多，其实从官网上可以看到它有很多方面的使用，这里就不一一介绍了，有兴趣可以去官网上查阅一下 https://demo.mobiscroll.com/， 这里主要介绍实现二级联动菜单treelist的使用。
1、html部分
1 <ul > 2 <li> 3 <span data->北京</span> 4 <ul> 5 <li data->北京市</li> 6 </ul> 7 </li> 8 <li class="dw-sel"> 9 <span data->天津</span> 10 <ul> 11 <li data->天津市</li> 12 </ul> 13 </li> 14 <li> 15 <span data->上海</span> 16 <ul> 17 <li data->上海市</li> 18 </ul> 19 </li> 20 <li> 21 <span data->重庆</span> 22 <ul> 23 <li data->重庆市</li> 24 </ul> 25 </li> 26 <li> 27 <span data->河北省</span> 28 <ul> 29 <li data->石家庄</li> 30 <li data->唐山</li> 31 <li data->秦皇岛</li> 32 <li data->邯郸</li> 33 <li data->邢台</li> 34 <li data->保定</li> 35 <li data->张家口</li> 36 <li data->承德</li> 37 <li data->沧州</li> 38 <li data->廊坊</li> 39 <li data->衡水</li> 40 </ul> 41 </li> 42 <li> 43 <span data->山西省</span> 44 <ul> 45 <li data->太原</li> 46 <li data->大同</li> 47 <li data->阳泉</li> 48 <li data->长治</li> 49 <li data->晋城</li> 50 <li data->朔州</li> 51 <li data->晋中</li> 52 <li data->运城</li> 53 <li data->忻州</li> 54 <li data->临汾</li> 55 <li data->吕梁</li> 56 </ul> 57 </li> 58 <li> 59 <span data->内蒙古区</span> 60 <ul> 61 <li data->呼和浩特</li> 62 <li data->包头</li> 63 <li data->乌海</li> 64 <li data->赤峰</li> 65 <li data->通辽</li> 66 <li data->鄂尔多斯</li> 67 <li data->呼伦贝尔</li> 68 <li data->巴彦淖尔</li> 69 <li data->乌兰察布</li> 70 <li data->兴安盟</li> 71 <li data->锡林郭勒盟</li> 72 <li data->阿拉善盟</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 。