Cara menggunakan jquery untuk mencapai hubungan antara wilayah dan majlis perbandaran-tutorial js-php.cn

Cara menggunakan jquery untuk mencapai hubungan antara wilayah dan majlis perbandaran

藏色散人

Lepaskan： 2021-12-01 10:55:05

asal

3931 orang telah melayarinya

Cara menggunakan jquery untuk merealisasikan hubungan antara wilayah dan majlis perbandaran: 1. Buat fail sampel HTML 2. Dalam fail js, hantarkan "$(function() {for(var i = 0; i < ; prvo. length; i ) {...}}" kaedah untuk mencapai hubungan antara wilayah dan bandar.

Cara menggunakan jquery untuk mencapai hubungan antara wilayah dan majlis perbandaran

Persekitaran operasi artikel ini: sistem windows7 , versi jquery-2.1.4, komputer DELL G3

Bagaimana untuk menggunakan jquery untuk merealisasikan hubungan wilayah dan bandar

Gunakan jQuery untuk merealisasikan wilayah dan bandar? menu pautan tiga peringkat

Gunakan jQuery untuk merealisasikan menu pautan tiga peringkat wilayah dan bandar. Sekiranya terdapat sebarang kekurangan, saya harap anda dapat memberi saya lebih banyak bimbingan

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

Salin selepas log masuk

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

Salin selepas log masuk

Pembelajaran yang disyorkan: "jquery tutorial video"

Atas ialah kandungan terperinci Cara menggunakan jquery untuk mencapai hubungan antara wilayah dan majlis perbandaran. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!