Javascript implémente le partage de code pour les liens provinciaux et municipaux

Le contenu de cet article concerne le partage de code JavaScript pour établir des liens provinciaux et municipaux. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Avant-propos : Cette série est principalement un résumé de quelques petites démos que j'ai utilisées pour apprendre l'implémentation de JavaScript. J'ai toujours l'impression que je ne peux pas l'oublier après l'avoir appris comme ça, alors allons-y. profitez des vacances pour le résumer.

Dans le développement normal d'un site Web, nous rencontrons souvent une telle exigence : lors de votre inscription sur la page ou de la saisie d'informations personnelles, vous devez sélectionner votre emplacement personnel. Lorsque vous sélectionnez une province, la ville correspondante dans cette province sera également. être automatiquement mis à jour.

Analyse de points techniques :

Opération DOM : Récupérer l'objet DOM qui doit être exploité

Array : Stocker les données de la ville correspondant à une province

Opérations sur les éléments : appendChild(), createElement()

Le code est le suivant :

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

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

Recommandations associées :

code de liaison à trois niveaux de la province et de la ville js

PHP+Mysql+Ajax+ JS réalise une liaison en cascade de code de liaison à trois niveaux de province et de ville

JS implémente une classe de menu déroulant de liaison à plusieurs niveaux, réalisant facilement des menus de liaison de province et de ville ! _Effets spéciaux de forme

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!