Javascript implements code sharing for provincial and municipal linkage

The content of this article is about the code sharing of javascript to achieve provincial and municipal linkage. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Preface: This series is mainly a summary of some small demos that I have used to learn JavaScript implementation. I always feel that I can’t just forget about it after learning it like this. Let’s summarize it during the holidays.

In ordinary website development, we often encounter such a requirement: when registering on the page or completing personal information, you must select your personal location. When you select a province, the corresponding city in that province will also be automatically updated. .

Technical point analysis:

DOM operation: Obtain the DOM object that needs to be operated

Array Array: Store the city data corresponding to a certain province

Element operations: appendChild(), createElement()

The code is as follows:

HTML code:

<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 code:

<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>

Related Recommended:

js three-level linkage code of provinces and municipalities

PHP Mysql Ajax JS realizes three-level linkage of provinces and municipalities

JS implements multi-level linkage drop-down menu class to easily implement province and city linkage menus! _Form special effects

The above is the detailed content of Javascript implements code sharing for provincial and municipal linkage. For more information, please follow other related articles on the PHP Chinese website!