mobiscroll实现二级联动菜单
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 。
