首页 >web前端 >js教程 >javascript实现省市联动的代码分享

javascript实现省市联动的代码分享

不言
不言原创
2018-08-22 11:23:552570浏览

本篇文章给大家带来的内容是关于javascript实现省市联动的代码分享,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

前言:这个系列主要是对之前学习JavaScript实现的一些小demo的总结,总觉得不能这样学过了就算了,趁着假期就好好总结一下吧。

在平常的网站开发中,我们常常会遇到这样的一个需求:在注册页面或者完善个人信息时要选择个人所在地,当选择省时,该省对应的市也会自动更新。

技术点分析:

DOM操作:获取需要操作的DOM对象

数组Array:存储某个省对应的市数据

元素操作:appendChild(),createElement()

代码如下:

HTML代码:

<select onchange="changeCity(this.value)">
					<option>--请选择--</option>
					<option value="0">湖北</option>
					<option value="1">湖南</option>
					<option value="2">河北</option>
					<option value="3">河南</option>
				</select>
				<select id="city">
									
				</select>

JS代码:

<script>
			
	//1.创建一个二维数组用于存储省份和城市
	var cities = new Array(3);
	cities[0] = new Array("武汉市","黄冈市","襄阳市","荆州市");
	cities[1] = new Array("长沙市","郴州市","株洲市","岳阳市");
	cities[2] = new Array("石家庄市","邯郸市","廊坊市","保定市");
	cities[3] = new Array("郑州市","洛阳市","开封市","安阳市");
			
	function changeCity(val){
				
		//7.获取第二个下拉列表
		var cityEle = document.getElementById("city");
				
		//9.清空第二个下拉列表的option内容
		cityEle.options.length=0;
				
		//2.遍历二维数组中的省份
		for(var i=0;i<cities.length;i++){
			//注意,比较的是角标
			if(val==i){
				//3.遍历用户选择的省份下的城市
				for(var j=0;j<cities[i].length;j++){
					//alert(cities[i][j]);
					//4.创建城市的文本节点
					var textNode = document.createTextNode(cities[i][j]);
					//5.创建option元素节点
					var opEle = document.createElement("option");
					//6.将城市的文本节点添加到option元素节点
					opEle.appendChild(textNode);
					//8.将option元素节点添加到第二个下拉列表中去
					cityEle.appendChild(opEle);
				}
			}
		}
	}
</script>

 相关推荐:

js省市区三级联动代码

PHP+Mysql+Ajax+JS实现省市区三级联动

JS实多级联动下拉菜单类,简单实现省市区联动菜单!_表单特效

以上是javascript实现省市联动的代码分享的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关文章

查看更多