移动端省市区三级联动

风如白话

已于 2023-10-23 17:30:32 修改

阅读量1.2k

点赞数 2

分类专栏： aui web前端 # javascript 文章标签：前端 aui

于 2020-05-20 14:32:48 首次发布

本文链接：https://blog.csdn.net/weixin_43838488/article/details/106235434

版权

javascript 同时被 3 个专栏收录

43 篇文章 1 订阅

订阅专栏

web前端

33 篇文章 1 订阅

订阅专栏

aui

9 篇文章 2 订阅

订阅专栏

查看演示在这里插入图片描述

html代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>picker多级联动</title>
		<link rel="stylesheet" type="text/css" href="../../css/aui.min.css"/>
		<link rel="stylesheet" type="text/css" href="../../css/aui.picker.css"/>
		<script type="text/javascript" src="../../js/aui.min.js"></script>
		<script type="text/javascript" src="../../js/aui.picker.js"></script>
		<script type="text/javascript" src="../../lib/city.data.js"></script>
	</head>
	<body>
		<div class="container">
			<header class="aui-header">
				<a class="aui-header-left" onclick="aui.closeWin()"><i class="iconfont iconreturn"></i></a>
				<div class="aui-header-title">picker多级联动</div>
			</header>
			<div class="aui-content" style="padding: 15px 0 0 0;">
				<button class="aui-btn aui-btn-blue picker-0">picker一级联动</button>
				<button class="aui-btn aui-btn-blue picker-1">picker二级联动</button>
				<button class="aui-btn aui-btn-blue picker-2">picker三级联动</button>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		window.addEventListener("load", function(){
			var btns = document.querySelectorAll(".aui-btn");
			for(var i = 0; i < btns.length; i++){
				aui.touchDom(btns[i], "#FFF", "var(--aui-blue)", "1px solid var(--aui-blue)");					
			}
			//一级联动
			document.querySelector(".picker-0").addEventListener("click", function(){
				aui.picker.open({
					title: '选择区域',
					layer: 1,
					data: cityData, //城市数据
				},function(ret){
					console.log(ret);
					if(ret.status == 1){
						aui.picker.close(function(){
							aui.alert({msg: ret.data.text});						
						});						
					}
				})				
			});
			//二级联动
			document.querySelector(".picker-1").addEventListener("click", function(){
				aui.picker.open({
					title: '选择区域',
					layer: 2,
					data: cityData, //城市数据
				},function(ret){
					console.log(ret);
					if(ret.status == 1){
						aui.picker.close(function(){
							aui.alert({msg: ret.data.text + " " + ret.data.children.text});						
						});						
					}
				})
			});
			//三级联动
			document.querySelector(".picker-2").addEventListener("click", function(){
				aui.picker.open({
					title: '选择区域',
					layer: 3,
					data: cityData, //城市数据
					select: function(ret){
						console.log(ret);
					}
				},function(ret){
					console.log(ret);
					if(ret.status == 1){
						aui.picker.close(function(){
							aui.alert({msg: ret.data.text + " " + ret.data.children.text + ' ' + ret.data.children.children.text});						
						});						
					}
				})
			});
		});
	</script>
</html>

风如白话

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
移动端省市区三级联动

查看演示 html代码：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title>picker多级联动</tit
复制链接

扫一扫