Javascript implementiert Code-Sharing für die Verknüpfung zwischen Provinzen und Gemeinden

Der Inhalt dieses Artikels befasst sich mit der Codefreigabe von JavaScript zur Erzielung einer provinziellen und kommunalen Verknüpfung. Ich hoffe, dass er für Freunde in Not hilfreich ist.

Vorwort: Diese Serie ist hauptsächlich eine Zusammenfassung einiger kleiner Demos, die ich zum Erlernen der JavaScript-Implementierung verwendet habe. Ich habe immer das Gefühl, dass ich es nicht einfach vergessen kann, nachdem ich es so gelernt habe, also lasst uns Nutzen Sie den Feiertag, um ihn zusammenzufassen.

Bei der normalen Website-Entwicklung stoßen wir oft auf eine solche Anforderung: Wenn Sie sich auf der Seite registrieren oder persönliche Daten eingeben, müssen Sie Ihren persönlichen Standort auswählen. Wenn Sie eine Provinz auswählen, wird auch die entsprechende Stadt in dieser Provinz ausgewählt automatisch aktualisiert werden.

Technische Punktanalyse:

DOM-Operation: Erhalten Sie das DOM-Objekt, das bedient werden muss

Array Array: Speichern Sie die Stadtdaten, die a entsprechen bestimmte Provinz

Elementoperationen: appendChild(), createElement()

Der Code lautet wie folgt:

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>

Verwandte Empfehlungen:

js dreistufiger Verknüpfungscode für Provinzen und Gemeinden

PHP+Mysql+Ajax+JS um eine dreistufige Verknüpfung für Provinzen und Gemeinden zu realisieren

JS implementiert eine mehrstufige Verknüpfungs-Dropdown-Menüklasse, um Provinz- und Stadtverknüpfungsmenüs einfach zu implementieren! _Spezialeffekte bilden

Das obige ist der detaillierte Inhalt vonJavascript implementiert Code-Sharing für die Verknüpfung zwischen Provinzen und Gemeinden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!