下拉菜单--二级联动菜单练习

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>

<style type="text/css">

select{
	width:100px;
	}
	
</style>

<script type="text/javascript">
function selcity()
{
	var arr = [[],['海淀区', '朝阳区', '东城区', '西城区']
	,['沈阳', '大连', '鞍山', '抚顺']
	,['济南', '青岛', '烟台', '威海']
	,['石家庄', '廊坊', '唐山', '秦皇岛']];
	
	//获取选择的省的角标
	var selNode = document.getElementById("selid");
	var index = selNode.selectedIndex;
	var cities = arr[index];
	
	var subSelNode = document.getElementById("subselid");
	
	//有更简单的清除方式,只要改变下拉菜单的长度即可
	subSelNode.options.length = 0;
	
	/*
	//清除上一次选择的子菜单的内容
	for(var x = 1; x < subSelNode.options.length;)
	{
		subSelNode.removeChild(subSelNode.options[x]);
	}
	*/
	
	for(var x = 0; x < cities.length; x++)
	{
		var optNode = document.createElement("option");
		optNode.innerHTML = cities[x];
		subSelNode.appendChild(optNode);
	}
}
</script>

</head>

<body>

<select id="selid" onchange="selcity()">
	<option>--选择省市--</option>
	<option>北京市</option>
	<option>辽宁省</option>
	<option>山东省</option>
	<option>河北省</option>
</select>
<select id="subselid">
	<option>--选择城市--</option>
</select>
</body>
</html>


运行结果:

你可能感兴趣的:(下拉菜单--二级联动菜单练习)