<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>实现省市二级联动</title>
<script>
//思路： 找对象 找事件 实现相应的事件处理程序
var province = ['请选择','广东省','湖南省','湖北省'];
var city = [[],['广州市','深圳市','东莞市'],['长沙','株洲','湘潭'],['武汉市','咸宁市','天门市']];
//获取DOM对象
function $(id)
{
return document.getElementById(id);
}
//获取（遍历）省下拉列表
function createProvince()
{
for(var i = 0;i<province.length;i++)
{
var op = new Option(province[i],province[i]);
$('province').options.add(op);
}
}
//获取（遍历）市下拉列表
function createCity()
{
//获取被选中的省索引
var index = $('province').selectedIndex;
//清空下拉列表
$('city').length = 0;
for(var i = 0;i < city[index].length;i++)
{
var op = new Option(city[index][i],city[index][i]);
$('city').options.add(op);
}
}
window.onload = function()
{
createProvince();
//状态改变事件
$('province').onchange = createCity;
}
</script>
</head>
<body>
省：<select id='province'></select>
市：<select id='city'></select>
</body>
</html>
