mobiscroll实现二级联动菜单

　　mobiscroll是一款非常使用的移动端选择控件，一般用来日期时间的选择的多，其实从官网上可以看到它有很多方面的使用，这里就不一一介绍了，有兴趣可以去官网上查阅一下 https://demo.mobiscroll.com/，  这里主要介绍实现二级联动菜单treelist的使用。

　　1、html部分

         <ul id="areaList" style="display:none;">
             <li>
                 <span data-id="1">北京</span>
                 <ul>
                     <li data-id="11">北京市</li>
                 </ul>
             </li>
             <li class="dw-sel">
                 <span data-id="2" class="dw-sel">天津</span>
                 <ul>
                     <li data-id="21">天津市</li>
                 </ul>
             </li>
             <li>
                 <span data-id="3">上海</span>
                 <ul>
                     <li data-id="31">上海市</li>
                 </ul>
             </li>
             <li>
                 <span data-id="4">重庆</span>
                 <ul>
                     <li data-id="41">重庆市</li>
                 </ul>
             </li>
             <li>
                 <span data-id="5">河北省</span>
                 <ul>
                     <li data-id="51">石家庄</li>
                     <li data-id="52">唐山</li>
                     <li data-id="53">秦皇岛</li>
                     <li data-id="54">邯郸</li>
                     <li data-id="55">邢台</li>
                     <li data-id="56">保定</li>
                     <li data-id="57">张家口</li>
                     <li data-id="58">承德</li>
                     <li data-id="59">沧州</li>
                     <li data-id="510">廊坊</li>
                     <li data-id="511">衡水</li>
                 </ul>
             </li>
             <li>
                 <span data-id="6">山西省</span>
                 <ul>
                     <li data-id="61">太原</li>
                     <li data-id="62">大同</li>
                     <li data-id="63">阳泉</li>
                     <li data-id="63">长治</li>
                     <li data-id="64">晋城</li>
                     <li data-id="65">朔州</li>
                     <li data-id="66">晋中</li>
                     <li data-id="67">运城</li>
                     <li data-id="68">忻州</li>
                     <li data-id="69">临汾</li>
                     <li data-id="610">吕梁</li>
                 </ul>
             </li>
             <li>
                 <span data-id="7">内蒙古区</span>
                 <ul>
                     <li data-id="71">呼和浩特</li>
                     <li data-id="72">包头</li>
                     <li data-id="73">乌海</li>
                     <li data-id="74">赤峰</li>
                     <li data-id="75">通辽</li>
                     <li data-id="76">鄂尔多斯</li>
                     <li data-id="77">呼伦贝尔</li>
                     <li data-id="78">巴彦淖尔</li>
                     <li data-id="79">乌兰察布</li>
                     <li data-id="710">兴安盟</li>
                     <li data-id="711">锡林郭勒盟</li>
                     <li data-id="712">阿拉善盟</li>
                 </ul>
             </li>
         </ul>
         <input type="hidden" name="province" value="">
         <input type="hidden" name="city" value="">
         <input type="hidden" name="arry" value="">

　　2、js部分

　　一些配置说明都备注在代码后面，当然可以到官网查看更多的配置及api说明。

 $('#areaList').mobiscroll().treelist({
         theme: 'android-holo-light',//样式
         lang: 'zh',//语言
         display: 'bottom',//指定显示模式
         fixedWidth: [100,100],//2组滚动框的宽度
         placeholder: '请选择地区',//placeholder
         inputClass:'ui-input', //为插件生成的input添加样式
         inputName:'111',
         btnClass:'', //设置按钮显示的样式
         labels: ['省', '市'],
         headerText:function(valueText){return "请选择地区"},//选择区域头部
         rows:5,//滚动区域内的行数
         //showLabel:true,//是否显示labels
         onSelect:function(valueText,inst){

         },
         defaultValue: [0,1],//设置初始值
         formatResult: function (array) { //返回自定义格式结果
             province = $('#areaList>li').eq(array[0]).children('span');
             city = $('#areaList>li').eq(array[0]).find('ul li').eq(array[1]);
             $("input[name='province']").val(province.attr('data-id'))
             $("input[name='city']").val(city.attr('data-id'))
             $("input[name='arry']").val(array)
             return  province.text() + ' ' + (city.text() == null ? "" : city.text())
         }
 });

　　如果样式需要调整的，我们也可以根据实际情况修改下css，以满足需求。

　　最后提供一个百度网盘的下载地址 http://pan.baidu.com/s/1c1VLZKO 。