javascript实现省市区三级联动选择的代码（数据为模拟json数据）

最新推荐文章于 2025-06-15 15:41:46 发布

原创最新推荐文章于 2025-06-15 15:41:46 发布 · 7.5k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#js #json #省市区三级联动 #三级联动选择 #getJson

javascript 同时被 2 个专栏收录

14 篇文章

订阅专栏

jQuery

6 篇文章

订阅专栏

本文介绍了一种使用JavaScript和jQuery实现省市区三级联动选择的方法。通过解析预设的JSON数据来动态填充下拉列表，实现了从省份到城市再到区县的选择联动效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

javascript实现省市区三级联动选择的代码（数据为模拟json数据）：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery-1.11.1.min.js"></script>
		<style>
			select{
				width:100px;	
			}
		</style>
	</head>
	<body>
		省：
		<select name="" id="sheng">
			<option value="">请选择</option>
		</select>
		市：
		<select name="" id="shi" disabled="disabled">
			<option value="">请选择</option>
		</select>
		区：
		<select name="" id="qu" disabled="disabled">
			<option value="">请选择</option>
		</select>
		<script type="text/javascript">
			//省
			$.getJSON("data/local_P.json",function(date){
				date.forEach(function(item){
					var pOption = "<option value='"+item.id+"'>"+item.nameP+"</option>";
					$("#sheng").append(pOption);
				});
			});
			//市
			$("#sheng").change(function(){
				$("#shi").attr("disabled",false);
				$("#shi").children(":not(:first)").remove();
				$("#qu").children(":not(:first)").remove();
				$.getJSON("data/local_S.json",function(date){
					var pId = $("#sheng").val();
					date.forEach(function(item){
						if(item.p_id == pId){
							var sOption = "<option value='"+item.s_id+"'>"+item.nameS+"</option>";
							$("#shi").append(sOption);
						}
					});
				});
			});
			//区
			$("#shi").change(function(){
				$("#qu").attr("disabled",false);
				$("#qu").children(":not(:first)").remove();
				$.getJSON("data/local_q.json",function(date){
					console.log(date);
					var sId = $("#shi").val();
					date.forEach(function(item){
						if(item.s_id == sId){
							var qOption = "<option value='"+item.id_q+"'>"+item.nameq+"</option>";
							$("#qu").append(qOption);
						}
					});
				});
			});
		</script>
	</body>
</html>

数据为模拟数据，注意模拟的json数据每一项都要加双引号，否则 $.getJson()获取不到数据,json数据如下；

local_P.json：

[{
	"id":"1001",
	"nameP":"江苏"
},{
	"id":"1002",
	"nameP":"浙江"
}]

local_S.json：

[{
	"p_id":"1001",
	"s_id":"101",
	"nameS":"苏州"
},{
	"p_id":"1001",
	"s_id":"102",
	"nameS":"南通"
},{
	"p_id":"1002",
	"s_id":"201",
	"nameS":"金华"
},{
	"p_id":"1002",
	"s_id":"202",
	"nameS":"杭州"
}]

local_q.json：

[{
	"s_id":"102",
	"id_q":"10201",
	"nameq":"如皋"
},{
	"s_id":"102",
	"id_q":"10202",
	"nameq":"海门"
},{
	"s_id":"101",
	"id_q":"10203",
	"nameq":"吴中"
},{
	"s_id":"101",
	"id_q":"10204",
	"nameq":"高新区"
},{
	"s_id":"201",
	"id_q":"20203",
	"nameq":"金东"
},{
	"s_id":"201",
	"id_q":"20204",
	"nameq":"义乌"
},{
	"s_id":"202",
	"id_q":"20201",
	"nameq":"杭州下属市1"
},{
	"s_id":"202",
	"id_q":"20202",
	"nameq":"杭州下属市2"
}]

以上，是自己模拟json数据写的省市区三级联动选择的例子，注意json数据的格式问题。