当前位置：网站首页>Classic case of JS operation node (three-level linkage)

Classic case of JS operation node (three-level linkage)

2022-06-22 02:51:00 【Programming Bruce Lee】

introduce

adopt JS operation DOM Element object , Realize three-level linkage , The effect is shown in the figure .
Insert picture description here

js Code 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title> Three level linkage </title>
	</head>
	<body>
		<select name="province" id="province" onchange="changeP(this)">
			<option value="-1">-- Please select a province --</option>
		</select>
		<select name="city" id="city" onclick="changeC(this)">
			<option value="">-- Please choose the city --</option>
		</select>
		<select name="area" id="area">
			<option value="">-- Please select zone --</option>
		</select>
	</body>
	<script>
		let arrP = [' Hunan province ', ' Hubei province ', ' Guangdong province, '];
		let arrC = [
			[' Changsha ', ' zhuzhou ', ' Jishou ', ' changde ', ' zhangjiajie '],
			[' wuhan ', ' xiangyang ', ' Suizhou ', ' yichang ', ' jingzhou '],
			[' Guangzhou ', ' Taishan ', ' foshan ', ' zhongshan ', ' The clouds are floating ']
		];
		let arrA = [
			[
				[' Changsha 1', ' Changsha 2', ' Changsha 3', ' Changsha 4', ' Changsha 5'],
				[' zhuzhou 1', ' zhuzhou 2', ' zhuzhou 3', ' zhuzhou 4', ' zhuzhou 5'],
				[' Jishou 1', ' Jishou 2', ' Jishou 3', ' Jishou 4', ' Jishou 5'],
				[' changde 1', ' changde 2', ' changde 3', ' changde 4', ' changde 5'],
				[' zhangjiajie 1', ' zhangjiajie ', ' zhangjiajie 3', ' zhangjiajie 4', ' zhangjiajie 5']
			],
			[
				[' wuhan 1', ' wuhan ', ' wuhan 3', ' wuhan 4', ' wuhan 5'],
				[' xiangyang 1', ' xiangyang 2', ' xiangyang 3', ' xiangyang 4', ' xiangyang 5'],
				[' Suizhou 1', ' Suizhou 2', ' Suizhou 4', ' Suizhou 4', ' Suizhou 5'],
				[' yichang 1', ' yichang 2', ' yichang 3', ' yichang 4', ' yichang 5'],
				[' jingzhou 1', ' jingzhou 2', ' jingzhou 3', ' jingzhou 4', ' jingzhou 5']
			],
			[
				[' Guangzhou 1', ' Guangzhou 2', ' Guangzhou ', ' Guangzhou 4', ' Guangzhou 5'],
				[' Taishan 1', ' Taishan 2', ' Taishan 3', ' Taishan 4', ' Taishan 5'],
				[' foshan 1', ' foshan 2', ' foshan 3', ' foshan 4', ' foshan 5'],
				[' zhongshan 1', ' zhongshan 2', ' zhongshan 3', ' zhongshan 4', ' zhongshan 5'],
				[' The clouds are floating 1', ' The clouds are floating 2', ' The clouds are floating 3', ' The clouds are floating 4', ' The clouds are floating 5']
			],
		];
		// Add province selection 
		let province = document.getElementById('province');
		let area = document.getElementById('area');
		let city = document.getElementById('city');
		for (let i in arrP) {
    
			let op = document.createElement('option');
			op.setAttribute('value', arrP[i]);
			op.innerText = arrP[i];
			province.appendChild(op);
		}
		// Save change function 
		function changeP(provinceH) {
    
			let arr = arrC[provinceH.selectedIndex - 1];
			// Let the provinces leave only the first item 
			if (typeof arr != 'undefined') {
    
				city.options.length = 0;
				for (let index in arr) {
     // establish Option Object can directly set the text content and value 
					city.options.add(new Option(arr[index], arr[index]));
				}
				changeC(city);
			} else {
    
				city.innerHTML = "<option value='-1'>-- Please choose the city --</option>";
				area.innerHTML = "<option value='-1'>-- Please select zone --</option>";
			}
		}
		// Area change function 
		function changeC(cityH) {
    
			// Prevent as undefined An error is reported when fetching the array value 
			if (typeof arrA[province.selectedIndex - 1] != 'undefined') {
    
				let arr = arrA[province.selectedIndex - 1][cityH.selectedIndex];
				// Let the provinces leave only the first item 
				area.options.length = 0;
				for (let index in arr) {
     // establish Option Object can directly set the text content and value 
					area.options.add(new Option(arr[index], arr[index]));
				}
			}
		}
	</script>
</html>
原网站

版权声明
本文为[Programming Bruce Lee]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/173/202206220250403852.html

边栏推荐

猜你喜欢

随机推荐