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

ゝ一纸荒年。 2024-04-17 15:51 130阅读 0赞

# 引言 #

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

**实现的效果**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x3cUJyZWxs_size_16_color_FFFFFF_t_70][]

**源码**

<!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>
    	</head>
    	<body>
    		<header class="mui-bar mui-bar-nav">
    			<h1 class="mui-title">城市二级联动</h1>
    		</header>
    		<div class="mui-content">
    			<div class="mui-content-padded">
    				<button id='showCityPicker' class="mui-btn mui-btn-block" type='button'>请选择地区...</button>
    			</div>
    		</div>
    		<script src="js/mui.min.js"></script>
    		<script src="js/mui.picker.js"></script>
    		<script src="js/mui.poppicker.js"></script>
    		<script src="js/city.data.js" type="text/javascript" charset="utf-8"></script>
    		<script>
    			mui.init();
    			mui.ready(function() {
    				// 二级联示例
    				var cityPicker = new mui.PopPicker({
    					layer: 2
    				});
    				cityPicker.setData(cityData);
    				var showCityPickerButton = document.getElementById('showCityPicker');
    				// 监听确定点击事件
    				showCityPickerButton.addEventListener('tap', function(event) {
    					cityPicker.show(function(items) {
    						showCityPickerButton.innerText = "你选择的城市是:" + items[0].text + " " + items[1].text;
    						
    						//返回 false 可以阻止选择框的关闭
    						//return false;
    					});
    				}, false);
    			});
    		</script>
    	</body>
    </html>

下载链接：

> 链接：[https://pan.baidu.com/s/1l3LoHsnK6Ir3Jcho744uTQ ][https_pan.baidu.com_s_1l3LoHsnK6Ir3Jcho744uTQ]  
> 提取码：9pgd

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x3cUJyZWxs_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/d85b911a4f6c45b7ac3f084e025c75b5.png
[https_pan.baidu.com_s_1l3LoHsnK6Ir3Jcho744uTQ]: https://pan.baidu.com/s/1l3LoHsnK6Ir3Jcho744uTQ%C2%A0