Maison > Article > interface Web > Comment utiliser jquery pour établir des liens entre les provinces et les municipalités

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

藏色散人original: 2021-12-01 10:55:053874parcourir

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.

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>

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>")
		}
	})})

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment sélectionner des éléments et modifier les attributs avec jqueryArticle suivant：Comment sélectionner des éléments et modifier les attributs avec jquery

Articles Liés

Voir plus