JavaScript事件——省市区的三级联动

最新推荐文章于 2023-05-24 14:43:07 发布

喋喋小菜鸡

最新推荐文章于 2023-05-24 14:43:07 发布

阅读量419

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/DebbyOctober/article/details/108329637

版权

本文介绍了如何使用JavaScript实现省市区的三级联动效果。通过在页面上创建下拉选择框，并利用onchange事件监听用户的选择。数据存储为三维数组，根据用户选择的省份动态填充市区选项。在添加市区选项时，确保每次只保留与当前省份对应的选项。

摘要由CSDN通过智能技术生成

#创建一个页面，包含下拉选择框
在下拉框里面有事件：改变事件 onchange事件

#创建一个三维数组，存储数据
每个数组中第一个元素是省份，后面的元素是市区
1、得到也是数组（省市区对应关系）
2、拿到数组中的值和传递过来的值比较，如果相同，获取到值后面的元素
3、得到city的select
4、添加过去（使用）方法
由于每次都要向city里面添加option，第二次添加，会追加
每次添加之前，判断一下city里面是否有选项，如果有，删除

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	
	省:<select id="pro"></select>
	市:<select id="city"></select>
	区:<select id="county"></select>
	<script>
	var arr = [
	    "北京",[
	        "海淀",["海淀1","海淀2","海淀3"],
	        "朝阳",["朝阳1","朝阳2"

最低0.47元/天解锁文章

喋喋小菜鸡

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JavaScript事件——省市区的三级联动

#创建一个页面，包含下拉选择框在下拉框里面有事件：改变事件 onchange事件#创建一个三维数组，存储数据每个数组中第一个元素是省份，后面的元素是市区1、得到也是数组（省市区对应关系）2、拿到数组中的值和传递过来的值比较，如果相同，获取到值后面的元素3、得到city的select4、添加过去（使用）方法由于每次都要向city里面添加option，第二次添加，会追加每次添加之前，判断一下city里面是否有选项，如果有，删除<!DOCTYPE html><html&
复制链接

扫一扫