1.首先定义两个选择框，用id选择器，并添加一个onchange事件
<select id="province" onchange="city()"></select>
<select id="city"></select>
2.编写js代码 ，需要注意的是，由于会在body标签中，添加onload，所以不用担心会在页面加载之前执行。
<script>
var emp = new Array(); //定义数组存储数据
emp['湖南']=['长沙','娄底','衡阳'];
emp['广东']=['深圳','惠州','东莞'];
emp['湖北']=['武汉','荆州','随州'];
function province() { //创建一个函数
var proElt = document.getElementById("province"); //获取省的对象元素
for(var i in emp) { //使用for in 将数组中的数据取出
var option = document.createElement("option"); //创建元素
option.text = i; //将数组中的数据填入创建的元素中
proElt.options.add(option); //将元素添加显示
}
}
function city() {
var cityElt = document.getElementById("city"); //获取城市的对象元素
cityElt.options.length = 0; //清除列表项
var currentDep = document.getElementById("province").value; //获取选择的省份
for(var index in emp[currentDep]){ //for in 循环取出数据
var option = document.createElement("option"); //创建元素
option.text = emp[currentDep][index]; //index代表的是元素的下标，根据下标填入元素中
cityElt.options.add(option);
}
}
</script>
3.body需要绑定onload，确保在页面加载完毕之后执行
<body onload="province(),city()">
</body>
