首页 > 经验记录 > JavaScript数组应用,关联下拉菜单实现

JavaScript数组应用,关联下拉菜单实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			//map形式  键值对
			var cityList = [];
			cityList["湖南省"] = ["长沙市","株洲市","湘潭市"];
			cityList["湖北省"] = ["武汉市","黄冈市","十堰市"];
			cityList["广东省"] = ["广州市","深圳市","东莞市"];
			function loadCity(){
				var prov=document.getElementById("selProv").value;
				//清空之前的选项
				document.getElementById("selCity").options.length=1;
				for(var i in cityList[prov]){
					//创建option,值为cityList[ind-1][i]
					var op=new Option(cityList[prov][i]);
					//把new出来的option塞进城市select
					document.getElementById("selCity").options.add(op);
				}
			}
		</script>
	</head>
	<body>
		<div>
			<p>省份:<select id="selProv" onchange="loadCity()">
				<option>====请选择====</option>
				<option>湖南省</option>
				<option>湖北省</option>
				<option>广东省</option>
			</select></p>
			<p>城市:<select id="selCity">
				<option>====请选择====</option>
			</select></p>
		</div>
	</body>
</html>

 
效果是第一个下拉框点击湖南省,另一个下拉框动态的变成长株潭、同样的点击别的第二个就会动态变成那个省的城市
这里使用数组使用的是键值对的形式(map形式),也可以定义二维数组,就像是ArrayList集合一样

           


1 COMMENT

  1. 付超麒2018-05-04 20:16

    不错哦,还挺详细的

EA PLAYER &

历史记录 [ 注意:部分数据仅限于当前浏览器 ]清空

      00:00/00:00