【MUI】记录省市区三级联动开发

zqian1994

已于 2022-04-24 15:19:40 修改

阅读量9.5k

点赞数

分类专栏： UI库文章标签： MUI 三级联动

于 2017-11-18 11:21:25 首次发布

本文链接：https://blog.csdn.net/zqian1994/article/details/78567550

版权

UI库专栏收录该内容

13 篇文章 0 订阅

订阅专栏

效果图：

这里写图片描述

本文利用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插件请自行百度。
本帖仅作记录，如有不足，欢迎指正。不胜感谢！