欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

如何用jquery實現省市區(qū)聯動

本篇內容介紹了“如何用jquery實現省市區(qū)聯動”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

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

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

如何用jquery實現省市區(qū)聯動

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

怎么用jquery實現省市區(qū)聯動？

使用jQuery實現省市區(qū)三級聯動菜單

通過jQuery實現省市三級聯動菜單,有不足得地方還望大佬多多指導

HTML頁面

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>省市區(qū)聯動菜單</title>
	</head>
	
	<body>
		<!--選擇省-->
		<select id="prvoince">
			<option>--請選擇省份--</option>
		</select>
		<!--選擇市-->
		<select id="city">
			<option>--請選擇城市--</option>
		</select>
		
		<select id="district">
			<option>--請選擇區(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 = [
	["太原市", "呂梁市", "臨汾市", "運城市", "陽泉市"],
	["成都市", "綿陽市", "雅安市", "樂山市", "眉山市"]];var dis = [
	[
		["小店區(qū)", "迎澤區(qū)"],
		["呂梁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++) {
		//每次循環(huán)加一個option標簽
		$("#prvoince").append("<option>" + prvo[i] + "</option>")
	}
	//---on---在選擇元素上綁定一個或多個事件的事件處理函數
	//加入change事件使在省發(fā)生改變時 發(fā)生改變
	$("#prvoince").on('change', function() {
		//清除元素,將上一次選擇的內容清除掉,開始新一輪的選擇
		//$('#city').empty()
		$('#city').text(' ');
		$('#district').text(' ');
		//利用選擇器中的  :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('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實現省市區(qū)聯動”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關的知識可以關注創(chuàng)新互聯網站，小編將為大家輸出更多高質量的實用文章！

新聞標題：如何用jquery實現省市區(qū)聯動
URL分享：http://chinadenli.net/article22/gohijc.html

成都網站建設公司_創(chuàng)新互聯，為您提供搜索引擎優(yōu)化、外貿建站、標簽優(yōu)化、手機網站建設、微信公眾號、動態(tài)網站

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯

成都定制網站建設