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

博山網(wǎng)站制作公司哪家好，找創(chuàng)新互聯(lián)建站！從網(wǎng)頁設(shè)計(jì)、網(wǎng)站建設(shè)、微信開發(fā)、APP開發(fā)、成都響應(yīng)式網(wǎng)站建設(shè)公司等網(wǎng)站項(xiàng)目制作，到程序開發(fā)，運(yùn)營(yíng)維護(hù)。創(chuàng)新互聯(lián)建站成立于2013年到現(xiàn)在10年的時(shí)間，我們擁有了豐富的建站經(jīng)驗(yàn)和運(yùn)維經(jīng)驗(yàn)，來保證我們的工作的順利進(jìn)行。專注于網(wǎng)站建設(shè)就選創(chuàng)新互聯(lián)建站。

用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頁面

	
		
		
	
	
	
		
		
			--請(qǐng)選擇省份--
		
		
		
			--請(qǐng)選擇城市--
		
		
		
			--請(qǐng)選擇區(qū)--
		
		
		
			
		
		
		

	

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("" + prvo[i] + "")
	}
	//---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("" + citys[i] + "")
			//[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("" + distr[i]+ "")
		}
	})})

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