HTML实现三级联动（详细版）（省市，城市，区县）

最新推荐文章于 2025-07-12 09:25:11 发布

向日葵。。。

最新推荐文章于 2025-07-12 09:25:11 发布

阅读量3.5k

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_44858151/article/details/98028797

本文详细介绍了如何使用HTML来创建一个三级联动的地区选择器，涵盖了省市到区县的完整流程，包括DOM操作和事件监听等关键步骤。

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

             <!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
		    /*分析：
		     * 1创建html检点
		     * 2利用for循环便利出每一个数组
		     * （1）if判断所有的省市(省市是用arr[i][2]
		     * 	表示的是索引为2等于等于0的数全部便利出来)，
		     *  把省市判断出来后
		     *  (2)用一个变量把省市中的省全部显示出来
		     * （变量要是全局变量不然访问不到）
		     * （3）并赋给省市的下拉框
		     * 3(1)给省市添加一个onchange改变时内容触发
		     *  (2)便利出所有数组
		     *  （3）在数组中判断省市的value值是否等于等于
		     *    它对应的arr[i][2]的值
		     *  注：要提前在上一个城市里获取value
		     *   （4）再在里面用一个变量接收option标签
		     *    （5） 在外面用城市的innerhtml写入标签内
		     *    （6）方便进入下拉框
		     * 4获取城市的onchange内容改变时触发事件
		     * 同上
		     * 
		     * */
			window.onload=function(){
				var arr=[
				
				     [1,'陕西省',0],
				     [2,'山西省',0],
				     [3,'山东省',0],
				     [4,'四川省',0],
				     
				     [5,'陕西市1',1],
				     [6,'陕西市2',1],
				     [7,'陕西市3',1],
				     [8,'陕西市4',1],
				     
				     [9,'山西市1',2],
				     [10,'山西市2