级联菜单前端实现的一个级联小代码，用来保存起来，方便后边进行工作中的查看。这个掘金破毛病，非得让写一百字的描述。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>级联菜单</title>
	</head>
	<body>
		<select id="shengfen">   </select>
		<select id="chengshi">   </select>
		
		<script type="text/javascript">
			var arr = new Array();
			arr["湖北省"] = ['武汉', '宜昌', '襄樊', '黄石', '黄冈', '十堰'];
			arr["北京市"] = ['东城区', '西城区', '海淀区', '朝阳区', '大兴区', '昌平区'];
			arr["福建省"] = ['福州市', '厦门市', '泉州市', '龙岩市', '三明市'];
			var sf = document.getElementById("shengfen");
			var cs = document.getElementById("chengshi");
			//往第一个才菜单里面添加内容
			window.onload = function(){
				//添加默认选项
				var op1 = new Option();
				op1.text = "请选择省份"; 
				sf.add(op1);
				
				var op2 = new Option();
				op2.text = "请选择城市";
				cs.add(op2);
				
				//遍历数组，将每一个元素的下标作为省份下拉菜单的选项文本添加到选项中
				for(var i in arr){
					//i取到的不是0，1，2，3，4而是文本下标
					var op = new Option();
					op.text=i;
					sf.add(op);
				}
			}
			//1.当第一个菜单发生改变时触发第二个菜单事件
			sf.onchange = function(){
				//2.在处理函数中修改第二个下拉列表的选项
				//获取省份下拉列表选中选项的索引
				//selectIndex应该是：1，text：应该是：北京市
				/* selectIndex是下拉列表的选中选项的下标，而不是数组的下标
				   下拉列表永远有下标，但如果数组的key为文本就没有数字下标这个概念了*/
				var selectIndex = sf.selectedIndex;
				var text = sf.options[selectIndex].text;
				//获取到城市下拉列表中选项的内容
				var vv = arr[text];
				//把vv按逗号分割，然后创建n个option，添加到城市下拉列表中
				var vs = vv.toString().split(",");
				//清空之前的内容
				cs.options.length = 0;
				for(var i=0; i<vs.length; i++){
					var newOptions = new Option();
					newOptions.text = vs[i];
					cs.add(newOptions);
				}
			}
			
		</script>
	</body>
</html>