<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
var pros = new Array() //新建省份数组
pros[0] = "请选择省份" //给省份数组赋值
pros[1] = "江苏" // 给省份数组赋值
pros[2] = "浙江" //给省份数组赋值
pros[3] = "重庆" //给省份数组赋值
var citys = new Array()
citys[0] = new Array("请选择城市") //新建城市数组
citys[1] = new Array("南京","无锡","苏州") //给城市数组赋值
citys[2] = new Array("杭州","南通","宁波") //给城市数组赋值
citys[3] = new Array("合川","铜梁","渝北") //给城市数组赋值
function changepro()
{
var prov = document.getElementById("prov") //获取省份下拉框对象
clear(); //清除城市下拉框原有对象
setCitys(prov.selectedIndex) //根据选择的不同省份添加城市
}
function setCitys(count)
{
var city = document.getElementById("citys") //获取城市下拉框
var option = null;
for(var i = 0 ; i < citys[count].length ; i++)
{
option = document.createElement("option") //创建选项对象
option.text = citys[count][i] //设置选项的值
city.options.add(option) //将选项添加到下拉框中
}
}
function clear()
{
var city = document.getElementById("citys") //获取城市下拉框对象
var count = city.options.length //获取城市下拉框的数量
for(var i = 0 ; i < count ; i++)
{
city.options.remove(0)
} //清除目前所有下拉框
}
function init()
{
var prov = document.getElementById("prov")//获取省份下拉框对象
var option1 = document.createElement("option")//创建一个可选项
var option2 = document.createElement("option")//创建一个可选项
var option3 = document.createElement("option")//创建一个可选项
var option4 = document.createElement("option")//创建一个可选项
option1.text = pros[0]//为第一个选项赋值
option2.text = pros[1]//为第二个选项赋值
option3.text = pros[2]//为第三个选项赋值
option4.text = pros[3]//为第四个选项赋值
prov.options.add(option1)//向下拉框添加选项
prov.options.add(option2)//向下拉框添加选项
prov.options.add(option3)//向下拉框添加选项
prov.options.add(option4)//向下拉框添加选项
setCitys(0)//添加城市框的第一个数据
}//初始化界面,给下拉框中添加初始值,包括省份框中的4个数据和城市框中的第一个数据
</script>
</head>
<body οnlοad="init()">
<select id="prov" οnchange="changepro()">
</select>
<select id="citys">
</select>
</body>
</html>