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 。