<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
</head>
<body>
请选择省份：
<select onchange="sheng(this)">
<option>河南</option>
<option>山东</option>
<option>山西</option>
</select>
请选择城市：
<select id="city">
<option>郑州市</option>
<option>洛阳市</option>
<option>开封市</option>
</select>
</body>
<script type="text/javascript">function sheng(obj){
//定义一个二维数组,每个一位数组中的数据根据下标和省份的下拉相对应
//二维数组中的数据是我们特意这样写的，不能乱写
var areaArr = [
["郑州市","洛阳市","开封市"],
["白金市","青岛市","李县","曹市"],
["太原市","运城市","临汾市","大同市"]
];
//获取省份的下拉
//获取省份中，被选中的下标
var index = obj.selectedIndex;
//根据被选中的下标，找到对应的城市数据 ["太原市","运城市","临汾市","大同市"]
var arr = areaArr[index];
//获取城市的下拉框
var city = document.getElementById("city");
//将城市下拉中的所有选项全部删除
for(var i = city.options.length - 1; i >= 0; i--){
city.remove(i);
}
//删除成功之后，将需要填充的值加进去
for(var i = 0; i < arr.length; i++){
city.add(new Option(arr[i]));
}
}</script>
</html>
