<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
var array = new Array(5);
array[0]=new Array("深圳市","佛山市","惠州市","东莞市");
array[1]=new Array("南京市","白云市","火山市");
array[2]=new Array("长沙市","岳阳市","株洲市","三峡市");
array[3]=new Array("海口市","三亚市","五指山市","儋州市");
array[4]=new Array("石家庄","天津市");
/*
1.确定事件:onchange;
2.函数:selectProvince();
3.函数里进行交互
得到当前操作元素
得到当前选中的某一省份
从数组中取出对应的信息
动态创建城市元素节点
添加到城市select中
*/
function selectProvince(value){
// var province = document.getElementById("province");
// 得到当前选中的省份
// alert(province.value);
// var value = provinces.value;
// 从数组中取出对应的信息
var cities = array[value];
// 遍历城市信息
var citySelect = document.getElementById("city");
citySelect.options.length = 0;
for(var i=0;i<cities.length;i++){
// alert(citis[i])
var cityName = cities[i];
// 动态创建城市元素节点
var Nopt = document.createElement("option");
var textNode = document.createTextNode("cityName");
Nopt.appendChild(textNode);
var citySelect = document.getElementById("city");
citySelect.appendChild(Nopt);
}
}
</script>
</head>
<body>
<!-- 请选择省份 -->
<select name="sprovince"onchange="selectProvince(this.value)">
<option value="-1">--请选择--</option>
<option value="0">广东省</option>
<option value="1">江苏省</option>
<option value="2">湖南省</option>
<option value="3">海南省</option>
<option value="4">河北省</option>
</select>
<!-- 请选择城市 -->
<select name="city"id="city">
<option value="-1">--请选择--</option>
</select>
</body>
</html>