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 。

mobiscroll实现二级联动菜单的更多相关文章

  1. 利用JS实现一个简单的二级联动菜单

    前几天在看js的相关内容,所以就简单写了一个二级联动菜单.分享一下. <!DOCTYPE html> <html lang="en"> <head&g ...

  2. angular二级联动菜单

    <!doctype html> <html lang="en" ng-app='App'> <head> <meta charset=&q ...

  3. JS简单实现二级联动菜单

    <form method="post" action=""> 省/市:<select id="province" onch ...

  4. JQuery EasyUI Combobox 实现省市二级联动菜单

    //编辑改动或新增页面联动能够这样写 jQuery(function(){ // 省级 $('#province').combobox({ valueField:'itemvalue', //值字段 ...

  5. 【JavaWeb】实现二级联动菜单

    实现效果 频道信息 package demo; public class Channel { private String code; //频道编码 private String name; //频道 ...

  6. 使用Javascript来实现二级联动菜单的效果

    效果图如下: 具体实现步骤如下: 1.所用js代码如下: <script type="text/javascript"> var arr_province=[" ...

  7. 使用javascript中读取Xml文件做成的一个二级联动菜单

    [html] view plaincopy <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> ...

  8. 一个asp+ACCESS省市二级联动菜单程序

    <%dim conndim connstron error resume nextconnstr="DBQ="+server.MapPath("test.mdb&q ...

  9. AngularJS中实现无限级联动菜单

    多级联动菜单是常见的前端组件,比如省份-城市联动.高校-学院-专业联动等等.场景虽然常见,但仔细分析起来要实现一个通用的无限分级联动菜单却不一定像想象的那么简单.比如,我们需要考虑子菜单的加载是同步的 ...

随机推荐

  1. Tomcat 的work 目录

    1    用tomcat作web服务器的时候,部署的程序在webApps下,这些程序都是编译后的程序(发布到tomcat的项目里含的类,会被编译成.class后才发布过来,源文件没有发布过来,但这里的 ...

  2. 新上线MySQL数据库规划

    新上线MySQL数据库规划1.删除test库2.删除root用户或者让root用户只可在本机登陆而对于有业务访问的数据库,在做删除root用户前需要依次确认 function.procedure.ev ...

  3. 阶段1 语言基础+高级_1-3-Java语言高级_04-集合_05 List集合_1_List集合_介绍&常用方法

    有序的,还包含索引,允许有重复的值 . add   打印出来的不是地址,说明重写了toString的方法 remove方法 返回的是被移除的元素 set方法 get 索引越界异常 几种越界的异常

  4. webservice引用

    class VidyoPortalUserServiceWithAuthentication : VidyoPortalUserService { String _username; String _ ...

  5. python笔记01(详情请看廖雪峰的官方网站)

    python 在调用函数的时候, 如果传入的参数数量不对, 如果传入的参数类型不对 会报TypeError的错误,并且Python会明确提示参数错误原因. hex()内置函数会把一个整数转换成十六进制 ...

  6. 应用安全 - 路由器 - D-LINK - 漏洞汇总

    D-Link D-Link DSL-2750B任意命令执行漏洞 CVE-2019-16920 影响范围 DIR- DIR-866L DIR- DHP- CVE-2017-7405 Date 类型 嗅探 ...

  7. 解决jQuery的toggle()的自动触发问题

    在1.9以后的版本toggle()就存在这个问题,用之前的版本就正常了 解决办法: 1.去 jquery官网下载一个版本升级文件.http://blog.jquery.com/2013/05/08/j ...

  8. 详细解析arry.map() ,function.apply() 方法

    首先转载一篇博文:关于map 和callbackfn 的一些参数和返回值可以查看以下链接. http://www.cnblogs.com/xuan52rock/p/4460938.html array ...

  9. Spring MVC @RequestBody自动转JSON HTTP415错误解决方法

    转自:http://blog.csdn.net/tiantiandjava/article/details/46125141 项目中想用@RequestBody直接接收json串转成对象 网上查了使用 ...

  10. ubuntu系统下navicat 试用到期解决方案

    作者:python技术人 博客:https://www.cnblogs.com/lpdeboke 1.直接删除 /home目录下的 .navicat文件夹(此文件夹隐藏),如果你是64位,文件夹名称可 ...