JS之省市二级联动实现

步骤：

第一步：确定事件(onchange)并为其绑定一个函数

第二步：创建一个二维数组用于存储省份和城市

第三步：获取用户选择的省份

第四步：遍历二维数组中的省份

第五步：将遍历的省份与用户选择的省份比较

第六步：如果相同，遍历该省份下所有的城市

第七步：创建城市文本节点

第八步：创建option元素节点

第九步：将城市文本节点添加到option元素节点中去

第十步：获取第二个下拉列表，并将option元素节点添加进去

第十一步：每次操作前清空第二个下拉列表的option内容。

代码：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>省市二级联动</title>
			<style type="text/css">
				#birth{
					border: 1px solid pink;
					width: 500px;
					height: 300px;
					margin: auto;
					text-align: center;
				}
			</style>
			<script>
				//创建二维数组，存储省份和城市	
				var citys = new Array(4);
				citys[0] = new Array("东城区","西城区","崇文区","宣武区","朝阳区");
				citys[1] = new Array("长沙市","株洲市","湘潭市","岳阳市","永州市");				
				citys[2] = new Array("南京市","常州市","徐州市","无锡市","苏州市");
				citys[3] = new Array("广州市","深圳市","佛山市","汕头市","中山市");
				function changeCity(value){
					var sonCity = document.getElementById("sonCity");
					//每次操作前清空第二个下拉列表的option内容
					sonCity.options.length = 0;
					for(var i = 0 ; i < citys.length ; i++){
						if(value == i){
							for(var j = 0; j < citys[i].length ; j++){
								//创建城市文本节点
								var textNode = document.createTextNode(citys[i][j]);
								//创建option元素节点
								var opEle = document.createElement("option");
								opEle.appendChild(textNode);
								sonCity.appendChild(opEle);
							}
						}
					}
				}
			</script>
	</head>

	<body>

		<div id="birth">
			<p>籍贯</p>
			<select onchange="changeCity(value)">
			<option>--请选择--</option>
			<option value="0">北京</option>
			<option value="1">湖南</option>
			<option value="2">江苏</option>
			<option value="3">广东</option>
		    </select>
		    <span>
		    	    
		        <select id="sonCity">
								
		        </select>
		    </span>
		</div>
	</body>

</html>

JS之省市二级联动实现

步骤：

代码：

效果：

猜你喜欢