动态获取数据省市县的三级联动代码

最新推荐文章于 2025-06-12 15:31:58 发布

fly_luck

最新推荐文章于 2025-06-12 15:31:58 发布

阅读量1.4k

点赞数 5

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_42450611/article/details/80713240

本文介绍了一个使用JavaScript实现的三级联动选择器案例。该选择器基于省份、城市和区县的数据结构，通过AJAX请求从服务器获取数据，并动态更新下拉列表选项。同时，还提供了一个简单的数据库表格结构用于存储地区数据。

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

<script type="text/javascript">
$(function (){
	$.post(
		"sheng.action",
		function(obj){
			for (var i = 0; i < obj.length; i++) {
				$("#sheng").append("<option value="+obj[i].id+">"+obj[i].name+"</option>")				
			}
		},
		"json"
	)
	$("#sheng").change(function(){
		$("#shi").empty();//当省发生改变把以前市区的数据清空
		$("#shi").append($("<option value='0'> 请选择</option>"));//然后再追加一个请选择这样一个标签
		$("#xian").empty();//一起把以前县的数据清空
		$("#xian").append($("<option value='0'> 请选择</option>"));//然后再追加一个请选择这样一个标签
		var pid=$("#sheng").val();
		if(pid!=0){
			$.post(
					"sheng.action",
					{pid:pid},
					function(obj){
						for (var i = 0; i < obj.length; i++) {
							$("#shi").append("<option value="+obj[i].id+">"+obj[i].name+"</option>")				
						}
					},
					"json"
			)
		}	
	})
	$("#shi").change(function(){
		$("#xian").empty();//当市区发生该变把以前县的数据清空
		$("#xian").append($("<option value='0'> 请选择</option>"));
		var pid=$("#shi").val();
		$.post(
				"sheng.action",
				{pid:pid},
				function(obj){
					for (var i = 0; i < obj.length; i++) {
						$("#xian").append("<option value="+obj[i].id+">"+obj[i].name+"</option>")				
					}
				},
				"json"
		)
	})
})
</script>

<body>
	<h1>三级联动</h1>
	<select id="sheng">
		<option value="0">请选择</option>
	</select>
	<select id="shi">
		<option value="0">请选择</option>
	</select>
	<select id="xian">
		<option value="0">请选择</option>
	</select>
</body>

CREATE TABLE `sanji` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(255) DEFAULT NULL,
  `pid` int(11) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=24 DEFAULT CHARSET=utf8;
INSERT INTO `sanji` VALUES ('1', '北京', '0');
INSERT INTO `sanji` VALUES ('2', '山西', '0');
INSERT INTO `sanji` VALUES ('3', '河北', '0');
INSERT INTO `sanji` VALUES ('4', '河南', '0');
INSERT INTO `sanji` VALUES ('5', '山东', '0');
INSERT INTO `sanji` VALUES ('6', '海淀', '1');
INSERT INTO `sanji` VALUES ('7', '昌平', '1');
INSERT INTO `sanji` VALUES ('8', '丰台', '1');
INSERT INTO `sanji` VALUES ('9', '中关村', '6');
INSERT INTO `sanji` VALUES ('10', '西关环岛', '7');
INSERT INTO `sanji` VALUES ('11', '科技园', '8');
INSERT INTO `sanji` VALUES ('12', '太原', '2');
INSERT INTO `sanji` VALUES ('13', '吕梁', '2');
INSERT INTO `sanji` VALUES ('14', '小店', '12');
INSERT INTO `sanji` VALUES ('15', '尖草坪', '12');
INSERT INTO `sanji` VALUES ('16', '临县', '13');
INSERT INTO `sanji` VALUES ('17', '方山', '13');
INSERT INTO `sanji` VALUES ('18', '菏泽', '5');
INSERT INTO `sanji` VALUES ('19', '曹县', '18');
INSERT INTO `sanji` VALUES ('20', '石家庄', '3');
INSERT INTO `sanji` VALUES ('21', '新华区', '20');
INSERT INTO `sanji` VALUES ('22', '邓州', '4');
INSERT INTO `sanji` VALUES ('23', '镇平县', '22');

数据库的展示