jQuery实现省市联动

最新推荐文章于 2024-07-21 02:56:05 发布

才疏学浅的小缘同学

最新推荐文章于 2024-07-21 02:56:05 发布

阅读量1k

点赞数 1

分类专栏： Java学习 JavaScript学习文章标签： Java

本文链接：https://blog.csdn.net/qq_44790505/article/details/120283966

版权

jQuery 省市联动下拉框数据填充动态效果

关键词由CSDN通过智能技术生成

Java学习同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

JavaScript学习

6 篇文章 1 订阅

订阅专栏

一、需求

当点击一个选择框类的省份时，另一个选择框自动出现该省份的城市，使用jQuery实现。

二、代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>省市联动</title>
		<style type="text/css">
		#root{
			width: 20%;
			height: 100px;
			margin: 0px auto;
			border: solid 1px cornflowerblue;
			text-align: center;
		}
		#dream{
			letter-spacing: 2px;
			background-image: -webkit-linear-gradient(left,blue,#66ffff 10%,#cc00ff 20%,#CCCCFF 40%,#00FFFF 50%,#CCCCFF 60%,#CC00CC 70%,#CC00FF 80%,#66FFFF 90%,blue 100%);
			-webkit-text-fill-color: transparent;
			-webkit-background-clip: text;
			-webkit-background-size: 200% 100%;
			-webkit-animation: masked-animation 4s linear infinite;
			font-size: 20px;
		}
		
		@keyframes masked-animation{
			0% {
				background-position: 0 0;
			}
			100% {
				background-position: -100% 0;
			}
		}
	
		</style>
		<script type="text/javascript" src="js/jquery.js"></script>
		<script type="text/javascript">
		var data = [
			{'pid':1,'pname':'湖北','citys':[{'cid':'100','cname':'武汉'},
			                                   {'cid':111,'cname':'荆门'},
											   {'cid':666,'cname':'荆州'},
											   ]},
			{'pid':2,'pname':'江苏','citys':[{'cid':166,'cname':'南京'},
			                                   {'cid':233,'cname':'扬州'},
											   {'cid':777,'cname':'苏州'}
											   ]}								   
		];
		
		function fillProvince(){
			var $pro = $('#province');
			for (var i = 0; i < data.length; i++) {
				var $opt = $("<option value='"+ data[i].pid +"'>"+ data[i].pname +"</option>");
				$opt.appendTo($pro); //子对象appendTo(父对象)
		    }
        }
		
		function fillCity(pid){
			var citys; //保存指定省份的城市列表
			//根据pid获取省份对应的城市列表
			for(var i in data){
				if(data[i].pid == pid){
					citys = data[i].citys;
					break;
				}
			}
			//清空原来所有的城市列表，从而便于接受新的城市列表
			$('#city option').remove();
			//填充城市下拉框
			for (var i = 0; i < citys.length; i++) {
				var $opt = $("<option value='"+ citys[i].cid +"'>"+ citys[i].cname +"</option>");
				
				$('#city').append($opt);
		    }
		}
		
		$(function(){
			fillProvince();
			fillCity(1);
			
			$('#province').change(function(){
				var pid = $(this).val(); //获取当前所选择的省份编号
				fillCity(pid);   //根据省份编号填充对应的城市
			});
		})
	    
		</script>
	</head>
	<body>
		<div id="root">
			<select id="province"></select>
			<select id="city"></select>
			<p id="dream">生活不止眼前的苟且，还有诗和远方</p>
		</div>
	</body>
</html>