javascript之DOM编程实现城市的联动框

需求;用一张图片表示。
分析：
<!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>

<script type="text/javascript"> 

	function showCity(){

		//维护一个二维数组存储省份对应的城市

		var citys = [[],["广州","佛山","湛江","中山"],["长沙","衡阳","岳阳","郴州"],["南宁","桂林","贵港","柳州"]];			

		//获取省份对应的节点

		var provinceNode = document.getElementById("province");

		//获取省份选中的选项

		var selectIndex =  provinceNode.selectedIndex;

		//获取对应的城市

		var  cityDatas = citys[selectIndex];

		//找到city节点

		var cityNode = document.getElementById("city");

		//设置options的个数。<span style="font-family: Arial, Helvetica, sans-serif;">先清空city框所有option。因为不清空的话相当于不断的添加城市了。这里</span><span style="font-family: Arial, Helvetica, sans-serif;">保留一个option，即城市这一项保留下来其他的相当于清空了。</span><span style="font-family: Arial, Helvetica, sans-serif;">

</span>

		cityNode.options.length = 1 ;

		//遍历对应的所有城市然后创建对应的option添加到city上。

		for(var index = 0; index<cityDatas.length ; index++){

			var option = document.createElement("option");//创建option项

			option.innerHTML = cityDatas[index];//为创建的option添加属性值

			cityNode.appendChild(option);//拼接到cityNode后边，即在城市的属性后边添加城市。

		}

	}

</script>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

</head>

<body>

	省份<select id="province" onchange="showCity()">

    		<option>省份</option>

    		<option>广东</option>

            <option>湖南</option>

            <option>广西</option>

    	</select>

	城市<select id="city"><option>城市</option></select>

</body>

</html>
巴特西

javascript之DOM编程实现城市的联动框

最新文章

热门文章
