Web开发基础-JavaScript-21-CSDN博客

本文链接：https://blog.csdn.net/Coder_Boy_/article/details/81073256

JS中DOM对象使用的练习

案例思路：

省级联动案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>联动</title>
	</head>
	<body>
		省：
		<select onchange="chg();" id="province">
			<option value="-1">请选择</option>
			<option value="0">浙江省</option>
			<option value="1">江苏省</option>
			<option value="2">河北省</option>
		</select>
		
		市：
		<select id="city">
			<option>请选择</option>
		</select>
		
		<script type="text/javascript">
			//获取省份所对应的城市
			function loadCities(){
				
				return [
					["杭州","宁波","温州"],
					["南京","苏州","无锡"],
					["石家庄","保定","张家口"]
				];
			}
			
			//页面加载后自动获取城市
			var cities = loadCities();
			
			function chg(){
				//获取省份下拉选
				var sel1 = document.getElementById("province");
				//获取省份的序号
				var index = sel1.value;
				//获取该省份对应的城市
				var pcities = cities[index];
				
				//删除所有城市（请选择除外）
				var sel2 = document.getElementById("city");
				var options = sel2.children;
				for(var i=options.length-1;i;i--){//不删除【请选择】：处理代码
					options[i].remove();
				}
				if(pcities){
					//追加城市
					for(var i=0;i<pcities.length;i++){
						var opn = document.createElement("option");
						opn.innerHTML = pcities[i];
						sel2.appendChild(opn);
					}
				}
			}
		
		
		</script>
	</body>

</html>

最终页面显示效果：选择对应省份后对应市会自动匹配该省份下的城市