如何用jquery實(shí)現(xiàn)省市區(qū)聯(lián)動(dòng)

發(fā)布時(shí)間：2021-12-01 11:06:49 來源：億速云閱讀：133 作者：iii 欄目：web開發(fā)

本篇內(nèi)容介紹了“如何用jquery實(shí)現(xiàn)省市區(qū)聯(lián)動(dòng)”的有關(guān)知識(shí)，在實(shí)際案例的操作過程中，不少人都會(huì)遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

用jquery實(shí)現(xiàn)省市區(qū)聯(lián)動(dòng)的方法：1、創(chuàng)建一個(gè)HTML示例文件；2、在js文件中通過“$(function() {for(var i = 0; i < prvo.length; i++) {...}}”方法實(shí)現(xiàn)省市區(qū)聯(lián)動(dòng)即可。

本文操作環(huán)境：windows7系統(tǒng)、jquery-2.1.4版、DELL G3電腦

怎么用jquery實(shí)現(xiàn)省市區(qū)聯(lián)動(dòng)？

使用jQuery實(shí)現(xiàn)省市區(qū)三級(jí)聯(lián)動(dòng)菜單

通過jQuery實(shí)現(xiàn)省市三級(jí)聯(lián)動(dòng)菜單,有不足得地方還望大佬多多指導(dǎo)

HTML頁面

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>省市區(qū)聯(lián)動(dòng)菜單</title>
	</head>
	
	<body>
		<!--選擇省-->
		<select id="prvoince">
			<option>--請(qǐng)選擇省份--</option>
		</select>
		<!--選擇市-->
		<select id="city">
			<option>--請(qǐng)選擇城市--</option>
		</select>
		
		<select id="district">
			<option>--請(qǐng)選擇區(qū)--</option>
		</select>
		
		<script src="jquery.js" type="text/javascript">
			
		</script>
		<script type="text/javascript" src="js/jq.js">
		</script>

	</body>

</html>

js頁面

var prvo = [
	"山西", "四川"];var cit = [
	["太原市", "呂梁市", "臨汾市", "運(yùn)城市", "陽泉市"],
	["成都市", "綿陽市", "雅安市", "樂山市", "眉山市"]];var dis = [
	[
		["小店區(qū)", "迎澤區(qū)"],
		["呂梁1", "呂梁2"],
		["臨汾1", "臨汾2"],
		["運(yùn)城1", "運(yùn)城2"],
		["陽泉1", "陽泉2"]
	],
	[
		["成都1", "成都2"],
		["綿陽1", "綿陽2"],
		["雅安1", "雅安2"],
		["樂山1", "樂山2"],
		["眉山1", "眉山2"]
	]]$(function() {

	//初始化省份
	for(var i = 0; i < prvo.length; i++) {
		//每次循環(huán)加一個(gè)option標(biāo)簽
		$("#prvoince").append("<option>" + prvo[i] + "</option>")
	}
	//---on---在選擇元素上綁定一個(gè)或多個(gè)事件的事件處理函數(shù)
	//加入change事件使在省發(fā)生改變時(shí) 發(fā)生改變
	$("#prvoince").on('change', function() {
		//清除元素,將上一次選擇的內(nèi)容清除掉,開始新一輪的選擇
		//$('#city').empty()
		$('#city').text(' ');
		$('#district').text(' ');
		//利用選擇器中的  :selected  方法匹配到所有的元素,然后再用index方法獲得下標(biāo)
		//得到被選中省份的下標(biāo)
		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('change',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>")
		}
	})})

“如何用jquery實(shí)現(xiàn)省市區(qū)聯(lián)動(dòng)”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！

向AI問一下細(xì)節(jié)

如何用jquery實(shí)現(xiàn)省市區(qū)聯(lián)動(dòng)

HTML頁面

js頁面

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽