mui开发APP教程之省市区级联

来源：互联网发布：域名被墙检测编辑：程序博客网时间：2024/06/16 19:51

在前一章我们写了年月日级联，这次我们来写省市级联，同样，实现级联的功能是基于mui的picker选择器，
所以到导入文件，这次要导入mui.picker.css、mui.poppiker.js以及用来存储地址信息得city.data-3.js（三级级联，若指向二级级联，则可使用city.data.js）,
文件获取途径，见上篇年月日级联（http://blog.csdn.net/zhy13087344578/article/details/70578476）

废话不多说，我们来看代码：

<!doctype html><html lang="en"><head>    <meta charset="UTF-8" />    <title>Document</title>    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />    <link rel="stylesheet" type="text/css" href="../css/mui.css"/>    <link rel="stylesheet" type="text/css" href="../css/mui.picker.css"/></head><body>    <header class="mui-bar mui-bar-nav">        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left">            <span style="color: #202020; font-size: 20px;">年月日级联</span>        </a>    </header>      <div class="mui-content">        <div id="showAddress"> 省、市、区</div>    </div>    <script src="../js/mui.js" type="text/javascript" charset="utf-8"></script>    <script src="../js/mui/picker.js" type="text/javascript" charset="utf-8"></script>    <script src="../js/mui/poppicker.js" type="text/javascript" charset="utf-8"></script>    <script src="../js/mui/city.data-3.js" type="text/javascript" charset="utf-8"></script>    <script type="text/javascript">        mui.plusReady(function(){            document.getElementById('showAddress').addEventListener('tap',function () {                var adressStr='';                var addressPicker=new mui.PopPicker({                    layer:3//显示几层，我们要显示省、市、区，所以我们这里写三层，如果不写默认是一层                });                picker.setData(cityData3);//city.data-3.js中的数据                datePicker.show(function(selectItems){                    //将选择的省、市、区显示到屏幕上                    for(var i=0;i<selectItems.length;i++){                        adressStr+=selectItems[i].text;                    }                    document.getElementById('showAddress').innerHTML=adressStr;                });            })        });    </script></body></html>

超级简单

0 0