首页 > 技术文章 > mobiscroll实现二级联动菜单

coober 2017-03-21 15:49 原文

  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 。

推荐阅读