二级联动，一级/二级/三级城市展示

最新推荐文章于 2022-03-28 17:31:12 发布

漂移的电子

最新推荐文章于 2022-03-28 17:31:12 发布

阅读量2.2k

点赞数

分类专栏： js 文章标签：前端

本文链接：https://blog.csdn.net/weixin_40030173/article/details/105350370

版权

js 专栏收录该内容

51 篇文章 1 订阅

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</title>

		<style type="text/css">
			.form-group{
				width: 100%;
				margin-top: 20px;
			}
			.st-select {
				width: 80px;
				height: 20px;
			}
			.form-title{
				float: left;
				}
				.form-con{
					float: left;
				}
		</style>
	</head>

	<body>
		<div class="form-group">
			<div class="form-title">
				<span>城市类型：</span>
			</div>
			<div class="form-con">
				<div id="">
					<select class="st-select prov" name="city_class" id="city_class" >
						<option value="1" selected="selected">一级城市</option>
						<option value="2">二级城市</option>
						<option value="3">三级城市</option>
					</select>
				</div>
			</div>
		</div>
		<br />
		<div class="form-group">
			<div class="form-title">
				<span>城市精准：</span>
			</div>
			<div class="form-con">
				<div id="">
					<select class="st-select prov" name="city" id="city"></select>
				</div>
			</div>
		</div>
		<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
		<script src="../js/city.js"></script>
	</body>
</html>

function getAreaData_screen() {
	return {
		c1: [{
			110100: "北京市"
		}, {
			310100: "上海市"
		}, {
			440100: "广州市"
		}, {
			440300: "深圳市"
		}],
		c2: [{
			510100: "成都市"
		}, {
			500100: "重庆市"
		}, {
			330100: "杭州市"
		}, {
			420100: "武汉市"
		}, {
			320100: "南京市"
		}, {
			410100: "郑州市"
		}, {
			610100: "西安市"
		}, {
			210100: "沈阳市"
		}, {
			430100: "长沙市"
		}, {
			530100: "昆明市"
		}, {
			120100: "天津市"
		}, {
			330200: "宁波市"
		}, {
			350200: "厦门市"
		}, {
			370100: "济南市"
		}, {
			140100: "太原市"
		}, {
			360100: "南昌市"
		}, {
			520100: "贵阳市"
		}, {
			450100: "南宁市"
		}, {
			340100: "合肥市"
		}, {
			130100: "石家庄市"
		}, {
			320200: "无锡市"
		}, {
			320500: "苏州市"
		}, {
			370200: "青岛市"
		}, {
			210200: "大连市"
		}, {
			330300: "温州市"
		}, {
			220100: "长春市"
		}, {
			230100: "哈尔滨市"
		}, {
			320400: "常州市"
		}, {
			620100: "兰州市"
		}, {
			350100: "福州市"
		}],
		c3: [{
				460100: "海口市"
			}, {
				630100: "西宁市"
			}, {
				150100: "呼和浩特市"
			}, {
				440700: "江门市"
			},
			{
				320300: "徐州市"
			}, {
				410200: "开封市"
			}, {
				440400: "珠海市"
			}, {
				350500: "泉州市"
			}, {
				442e3: "中山市"
			}, {
				130600: "保定市"
			}, {
				130200: "唐山市"
			}, {
				130300: "秦皇岛市"
			}, {
				131e3: "廊坊市"
			},
			{
				321e3: "扬州市"
			}, {
				321100: "镇江市"
			}, {
				340200: "芜湖市"
			}, {
				330500: "湖州市"
			}, {
				320800: "淮安市"
			}, {
				340500: "马鞍山市"
			}, {
				320700: "连云港市"
			}, {
				460200: "三亚市"
			}, {
				450300: "桂林市"
			}, {
				350600: "漳州市"
			}, {
				450200: "柳州市"
			}, {
				610400: "咸阳市"
			}, {
				530400: "玉溪市"
			}, {
				410300: "洛阳市"
			}, {
				430200: "株洲市"
			}, {
				420500: "宜昌市"
			}, {
				420600: "襄阳市"
			}, {
				360400: "九江市"
			},
			{
				430600: "岳阳市"
			}, {
				420900: "孝感市"
			}, {
				421003: "荆州区"
			}, {
				370600: "烟台市"
			}, {
				370700: "潍坊市"
			}, {
				371e3: "威海市"
			}, {
				320600: "南通市"
			}, {
				330700: "金华市"
			}, {
				331e3: "台州市"
			}, {
				320900: "盐城市"
			}, {
				321200: "泰州市"
			}, {
				321300: "宿迁市"
			}, {
				330800: "衢州市"
			}, {
				331100: "丽水市"
			}, {
				330900: "舟山市"
			}, {
				440500: "汕头市"
			}, {
				441500: "汕尾市"
			}, {
				441800: "清远市"
			}, {
				441200: "肇庆市"
			}, {
				445200: "揭阳市"
			}, {
				511300: "南充市"
			}, {
				350900: "宁德市"
			}, {
				210800: "营口市"
			}, {
				210421: "抚顺县"
			}, {
				330400: "嘉兴市"
			}, {
				330600: "绍兴市"
			}, {
				520300: "遵义市"
			}, {
				411300: "南阳市"
			}, {
				371300: "临沂市"
			}
		]
	}
}

// 赋值地区数据
var city_data = getAreaData_screen();

var arr1 = []
for (var i = 0; i < city_data.c1.length; i++) {
	arr1.push({
		lable: Object.keys(city_data.c1[i]),
		value: Object.values(city_data.c1[i])
	})
}

var arr2 = []
for (var j = 0; j < city_data.c2.length; j++) {
	arr2.push({
		lable: Object.keys(city_data.c2[j]),
		value: Object.values(city_data.c2[j])
	})
}
var arr3 = []
for (var g = 0; g < city_data.c3.length; g++) {
	arr3.push({
		lable: Object.keys(city_data.c3[g]),
		value: Object.values(city_data.c3[g])
	})
}

function set(arr) {
	$("#city").empty();
	let htmllet = "";
	for (var k = 0; k < arr.length; k++) {
		htmllet += '<option value=' + arr[k].lable + '>' + arr[k].value + '</option>'
	}
	document.getElementById("city").innerHTML = htmllet;
}
set(arr1)
$("#city_class").click(
	function() {
		var options = $("#city_class option:selected");
		if (options.val() == "1") {
			set(arr1)
		} else if (options.val() == "2") {
			set(arr2)
		} else {
			set(arr3)
		}
	})
$("#city").click(function() {
	console.log($("#city_class option:selected").val())
	console.log($("#city option:selected").val())
})