Comment utiliser jquery pour établir des liens entre les provinces et les municipalités-js tutoriel-php.cn

Comment utiliser jquery pour établir des liens entre les provinces et les municipalités

藏色散人

Libérer： 2021-12-01 10:55:05

original

3869 Les gens l'ont consulté

Comment utiliser jquery pour établir des liens entre les provinces et les municipalités : 1. Créez un exemple de fichier HTML ; 2. Passez "$(function() {for(var i = 0; i < prvo.length; i++)) dans la méthode du fichier js {...}}" peut être utilisée pour réaliser des liens entre les provinces et les municipalités.

Comment utiliser jquery pour établir des liens entre les provinces et les municipalités

L'environnement d'exploitation de cet article : système windows7, version jquery-2.1.4, ordinateur DELL G3

Comment utiliser jquery pour réaliser des liens entre les provinces et les municipalités ? menu des provinces et des villes. S'il y a des lacunes, j'espère que vous pourrez me donner plus de conseils

Page HTML

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>省市区联动菜单</title>
	</head>
	
	<body>
		<!--选择省-->
		<select id="prvoince">
			<option>--请选择省份--</option>
		</select>
		<!--选择市-->
		<select id="city">
			<option>--请选择城市--</option>
		</select>
		
		<select id="district">
			<option>--请选择区--</option>
		</select>
		
		<script src="jquery.js" type="text/javascript">
			
		</script>
		<script type="text/javascript" src="js/jq.js">
		</script>

	</body>

</html>

Copier après la connexion

Page js

var prvo = [
	"山西", "四川"];var cit = [
	["太原市", "吕梁市", "临汾市", "运城市", "阳泉市"],
	["成都市", "绵阳市", "雅安市", "乐山市", "眉山市"]];var dis = [
	[
		["小店区", "迎泽区"],
		["吕梁1", "吕梁2"],
		["临汾1", "临汾2"],
		["运城1", "运城2"],
		["阳泉1", "阳泉2"]
	],
	[
		["成都1", "成都2"],
		["绵阳1", "绵阳2"],
		["雅安1", "雅安2"],
		["乐山1", "乐山2"],
		["眉山1", "眉山2"]
	]]$(function() {

	//初始化省份
	for(var i = 0; i < prvo.length; i++) {
		//每次循环加一个option标签
		$("#prvoince").append("<option>" + prvo[i] + "</option>")
	}
	//---on---在选择元素上绑定一个或多个事件的事件处理函数
	//加入change事件使在省发生改变时 发生改变
	$("#prvoince").on(&#39;change&#39;, function() {
		//清除元素,将上一次选择的内容清除掉,开始新一轮的选择
		//$(&#39;#city&#39;).empty()
		$(&#39;#city&#39;).text(&#39; &#39;);
		$(&#39;#district&#39;).text(&#39; &#39;);
		//利用选择器中的  :selected  方法匹配到所有的元素,然后再用index方法获得下标
		//得到被选中省份的下标
		var proIndex = $("#prvoince option:selected").index();
		var citys = cit[proIndex - 1]
		for(var i = 0; i < citys.length; i++) {
			$("#city").append("<option>" + citys[i] + "</option>")
			//[this.value]
		}
	})
	
	$("#city").on(&#39;change&#39;,function(){
		$("#district").empty()
		var proIndex = $("#prvoince option:selected").index();
		var citIndex = $("#city option:selected").index()
		var distr = dis[proIndex - 1][citIndex]
		for (var i = 0; i < distr.length; i++) {
			$("#district").append("<option>" + distr[i]+ "</option>")
		}
	})})

Copier après la connexion

Apprentissage recommandé : "Tutoriel vidéo jquery

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!

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

Comment utiliser jquery pour établir des liens entre les provinces et les municipalités