免费观看又色又爽又黄的小说免费_美女福利视频国产片_亚洲欧美精品_美国一级大黄大色毛片

如何用jquery實現省市區聯動

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

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

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

如何用jquery實現省市區聯動

本文操作環境：windows7系統、jquery-2.1.4版、DELL G3電腦

怎么用jquery實現省市區聯動？

使用jQuery實現省市區三級聯動菜單

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

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>

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('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實現省市區聯動”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注創新互聯網站，小編將為大家輸出更多高質量的實用文章！

新聞標題：如何用jquery實現省市區聯動
URL分享：http://m.newbst.com/article22/gohijc.html

成都網站建設公司_創新互聯，為您提供搜索引擎優化、外貿建站、標簽優化、手機網站建設、微信公眾號、動態網站

廣告

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

成都定制網站建設