html写的省市联动案列

最新推荐文章于 2024-04-28 10:45:38 发布

坐井观天小青蛙

最新推荐文章于 2024-04-28 10:45:38 发布

阅读量539

点赞数 2

分类专栏： js

本文链接：https://blog.csdn.net/qq_42754261/article/details/94388271

版权

js 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

HTML写的省市联动，随便写的
在这里插入图片描述
贴上代码，跟别人的不太一样

<script type="text/javascript" src="jquery.min.js"></script>
	<script>
		var province =["江西省","福建省"];
		province["江西省"] = ["南昌市","丰城市","宜春市","萍乡市","鹰潭市","九江市"];
		province["福建省"] = ["厦门市","三明市","泉州市","福州市"];
		
		// 初始化市遍历省级和省级下面的市,市级默认为江西省.
		
		//  遍历省和市
		function initialize(){
			for(var i = 0; i<province.length; i++){
				var option = document.createElement("option");//创建一个节点
				option.setAttribute("value",province[i]);
				option.innerHTML=province[i];//为当前节点添加一个省
				document.getElementsByName("province")[0].appendChild(option);//在select节点下追加子节点
			}
			for(var i = 0; i<province["江西省"].length; i++){
				var option = document.createElement("option");
				option.innerHTML=province["江西省"][i];
				document.getElementsByName("city")[0].appendChild(option);//在select节点下追加子节点
			}
		}
		
		//触发事件时遍历对应省级下的城市
		
		//1 获取当前省索引位置
		function classification(){
			var city = document.getElementsByName("province")[0];
			var index = city.selectedIndex;//获得当前option索引
			var value = city.options[index].innerHTML;//获取当前option节点值
		//2 //删除所有子节点
			$("select[name='city'] option").remove();
			
		//3 遍历当前省数组
			for(var i = 0; i<province[value].length; i++){
				var option = document.createElement("option");
				option.innerHTML = province[value][i];
				document.getElementsByName("city")[0].appendChild(option);//在select节点下追加子节点
			}
		}
		
	</script>
</head>
<body onload="initialize()">
		<select name="province" onchange="classification()" >
		</select>
		<select name="city">
		</select>
</body>

坐井观天小青蛙

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
html写的省市联动案列

HTML写的省市联动，随便写的贴上代码，跟别人的不太一样<script type="text/javascript" src="jquery.min.js"></script> <script> var province =["江西省","福建省"]; province["江西省"] = ["南昌市","丰城市","宜春市","萍乡市","鹰潭市...
复制链接

扫一扫

专栏目录