MUI实现城市二级联动选择器

最新推荐文章于 2021-04-07 16:49:10 发布

原创

最新推荐文章于 2021-04-07 16:49:10 发布 · 1.5k 阅读

3 ·

CC 4.0 BY-SA版权

引言

城市的二级联动跟城市的三级联动差不多，不过使用的场景还是有一小点区别的，三级联动往往设计详细信息，而二级联动显示的是一个大概信息，比如在个人信息中要描述用户所在的地区等，下面我们来看一个城市二级联动的小案例。

实现的效果

源码

<!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>城市二级联动</title>
		<link rel="stylesheet" href="css/mui.min.css">
		<link href="css/mui.picker.css" rel="stylesheet" />
		<link href="css/mui.poppicker.css" rel="stylesheet" />
		<style>
			.mui-btn {
				font-size: 16px;
				padding: 8px;
				margin: 3px;
			}
			.ui-alert {
				text-align: center;
				padding: 20px 10px;
				font-size: 16px;
			}
		</style&g