mui框架三级城市联动记录

效果图：

本文利用mui框架及其封装的picker组件进行编辑。

结构部分
HTML：
点击事件部分

<input type="text" placeholder="请选择地址" value="" id="site"/>

城市联动弹出层部分的结构无需书写， 全部通过JS进行添加

CSS：引入mui及mui封装的选择列表插件picker样式

<link href="../../css/app_css/css_lib/mui.picker.css" rel="stylesheet" /><link href="../../css/mui.min.css" rel="stylesheet" />

JS部分：大致同上 额外准备用来存储城市信息的JS

<script src="../../js/mui.min.js"></script><script src="../../js/app.js/js_lib/mui.picker.min.js"></script><script src="../../js/app.js/js_lib/data.city.js"></script>

JS页面调用部分

<script>//选择省市区     var city_picker = new mui.PopPicker({            layer: 3        });    city_picker.setData(init_city_picker);    $("#site").on("tap", function() {            setTimeout(function() {                city_picker.show(function(items) {                    if((items[0] || {}).text == undefined) {                        (items[0] || {}).text = "";                    } else if((items[1] || {}).text == undefined) {                        (items[1] || {}).text = "";                    } else if((items[2] || {}).text == undefined) {                        (items[2] || {}).text = "";                    } //该ID为接收城市ID字段     $("#site").val((items[0] || {}).text + "-" + (items[1] || {}).text + "-" + (items[2] || {}).text);            });        }, 200);    });</script>

关于相关CSS样式及JS插件请自行百度。
本帖仅作记录，如有不足，欢迎指正。不胜感谢！