三级联动省市区

最新推荐文章于 2023-03-21 08:21:33 发布

秋秋喵

最新推荐文章于 2023-03-21 08:21:33 发布

阅读量270

点赞数

分类专栏： js初阶文章标签：三级联动数据动态获取

本文链接：https://blog.csdn.net/qiuyan_f/article/details/79217791

版权

js初阶专栏收录该内容

7 篇文章 0 订阅

订阅专栏

.html

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	
	<body>
		<script src="js/jquery.min.js"></script>
		<script src="js/area.js" type="text/javascript" charset="utf-8"></script>
		<div>省市县三级联动</div>
		<div id="luckyName">

			<select id="provinceSelect">
				<option value="0">选择</option>
			</select>

			<select id="citySelect" ">
				<option value="0">选择</option>
			</select>

			<select id="countrySelect">
				<option value="0">选择</option>
			</select>

		</div>
	</body>

</html>

area.js

var p = [
				{ pid: 1, name: '北京' },
				{ pid: 2, name: '河南' },
				{ pid: 3, name: '辽宁' }
			]
			var c = [
				{ cid: 1, name: '北京' },

				{ cid: 2, name: '安阳' },
				{ cid: 3, name: '郑州' },
				{ cid: 4, name: '林州' },

				{ cid: 5, name: '大连' },
				{ cid: 6, name: '沈阳' },
				{ cid: 7, name: '丹东' }
			]
			var q = [
				{ qid: 1, name: '朝阳区' },
				{ qid: 2, name: '文峰区' },
				{ qid: 3, name: '内黄县' },
				{ qid: 4, name: '殷墟区' },

				{ qid: 5, name: '开发区' },
				{ qid: 6, name: '高新区' },
				{ qid: 7, name: '沙河口' }
			]
			$(function() {
				//				渲染省
				var privince = [];
				//				$.ajax({
				//						url: 'KD002/search',
				//						type: 'get',
				//						dataType: "json",
				//						success: function(data) {
				//							if(data.stateCode == 0) {
				//								privince = p;
												privince = data.appData; 
				//							}
				//						},
				//						error: function() {
				//
				//						}
				//					});

				privince = p;
				$.each(privince, function(i, val) {
					console.log(val.pid + "####" + val.name);
					$("#provinceSelect").append("<option value='" + val.pid + "'>" + val.name + "</option>");
				});

				//渲染市
				$("#provinceSelect").change(function() {
					           
					var pid = $("#provinceSelect").val(); 
						console.log(pid);
					//					$.ajax({
					//						type: "get",
					//						url: "",
					//						data: {
					//							"pid": pid
					//						},
					//						ssuccess: function(data) {
					//							if(data.stateCode == 0) {
					//								var city = c;
					//								$.each(city, function(i, val) {
					//									console.log(val.cid + "####" + val.name);
					//									$("#citySelect").append("<option value='" + val.cid + "'>" + val.name + "</option>");
					//								});
					//							}
					//						}
					//					});
					var city = c;
					$("#citySelect").empty();
					$.each(city, function(i, val) {
						console.log(val.cid + "####" + val.name);
						$("#citySelect").append("<option value='" + val.cid + "'>" + val.name + "</option>");
					});
				});
				
				$("#citySelect").change(function() {
					var qid = $("#citySelect").val();
						console.log(qid);
					//					$.ajax({
					//						type: "get",
					//						url: "",
					//						data: {
					//							"qid": qid
					//						},
					//						ssuccess: function(data) {
					//							if(data.stateCode == 0) {
					//								var city = c;
					//								$.each(city, function(i, val) {
					//									console.log(val.cid + "####" + val.name);
					//									$("#citySelect").append("<option value='" + val.cid + "'>" + val.name + "</option>");
					//								});
					//							}
					//						}
					//					});
					var qu= q;
					$("#countrySelect").empty();
					$.each(qu, function(i, val) {
						console.log(val.qid + "####" + val.name);
						$("#countrySelect").append("<option value='" + val.qid + "'>" + val.name + "</option>");
					});
				});
			})