亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

Ajax select三級聯(lián)動實(shí)例

Original 2019-03-16 16:32:05 244
abstrakt：HTML<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ajax三級聯(lián)動操作</title> <script src="http://code.jquery.com/jquery-3.

HTML

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>ajax三級聯(lián)動操作</title>
	<script src="http://code.jquery.com/jquery-3.1.1.js"></script>
</head>
<body>
省:<select id="pro"></select> 市:<select id="city"></select> 區(qū)\縣:<select id="area"></select>
<hr>
<span id="one"></span> <span id="two"></span> <span id="three"></span>
</body>
</html>
<script type="text/javascript">

	$(document).ready(function(){

		// 加載pro.json的數(shù)據(jù), 并使用$.each('遍歷的數(shù)據(jù)','遍歷的鍵或者值function(k,v)')遍歷拼裝option加入select元素內(nèi)
		$.getJSON('pro.json', function(pro){
			// console.log(pro)
			let option = '<option value="">請選擇</option>';
			$.each(pro, function(k){
				option += '<option value="'+pro[k].proId+'">'+pro[k].proName+'</option>';
			});
			$('#pro').html(option);
		});

		/* 當(dāng)id為pro改變是觸發(fā)
			循環(huán)判斷city.proId的值是否等于上一級的proId的值  	
		*/
		$('#pro').change(function(){
			$.getJSON('city.json', function(city){
				let option = '<option value="">請選擇</option>';
				$.each(city, function(k){
					if(city[k].proId == $('#pro').val()){
						option += '<option value="'+city[k].cityId+'">'+city[k].city+'</option>';
					}
				});
				$('#city').html(option);
			});
			let name1 =  $(this).find(':selected').text();
			$('#one').text(name1);
		});

		$('#city').change(function(){
			$.getJSON('area.json', function(area){
				let option = '<option value="">請選擇</option>';
				$.each(area, function(k){
					if(area[k].cityId == $('#city').val()){
						option += '<option value="'+area[k].areaId+'">'+area[k].area+'</option>';
					}
				});
				$('#area').html(option);
			});
			let name2 = $(this).find(':selected').text();
			$('#two').html(name2);
		});

		$('#area').change(function(){
			let name3 = $(this).find(':selected').text();
			$('#three').html(name3);
		});
	});
</script>

pro.json

[
	{"proId" : 1, "proName" : "廣東"},

	{"proId" : 2, "proName" : "廣西"}
]

city.json

[
	{"proId" : 1, "cityId" : 1, "city" : "深圳市"},	

	{"proId" : 1, "cityId" : 2, "city" : "廣州市"},	

	{"proId" : 2, "cityId" : 3, "city" : "南寧市"},	

	{"proId" : 2, "cityId" : 4, "city" : "柳州市"}

]

area.json

[
	{"cityId" : 1, "areaId" : 1, "area" : "羅湖區(qū)"},

	{"cityId" : 1, "areaId" : 2, "area" : "福田區(qū)"},

	{"cityId" : 1, "areaId" : 3, "area" : "南山區(qū)"},

	{"cityId" : 2, "areaId" : 4, "area" : "天河區(qū)"},

	{"cityId" : 2, "areaId" : 5, "area" : "荔灣區(qū)"},

	{"cityId" : 2, "areaId" : 6, "area" : "越秀區(qū)"},

	{"cityId" : 3, "areaId" : 7, "area" : "良慶區(qū)"},

	{"cityId" : 3, "areaId" : 8, "area" : "江南區(qū)"},

	{"cityId" : 4, "areaId" : 9, "area" : "融安縣"},

	{"cityId" : 4, "areaId" : 10, "area" : "三江縣"}
]


Korrigierender Lehrer：查無此人Korrekturzeit：2019-03-18 09:04:09
Zusammenfassung des Lehrers：完成的不錯(cuò)。三級聯(lián)動現(xiàn)在很常用，比如二級分類，加產(chǎn)品。在一起是三級聯(lián)動。繼續(xù)加油

Versionshinweise

Beliebte Eintr?ge