<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>省市级联菜单</title>
<script language="javascript">
//定义省份包含的城市数组
var cityList= new Array();
//选中省份的下标
var provinceIndex;
//显示二级级联
function selectCity()
{
cityList['云南省']=['昆明市','大理市'];
cityList['陕西省']=['西安市','安康市','榆林市'];
//获得第一级联的索引
provinceIndex = document.form1.selProvince.value;
var op;
//清空第二级联和三级联,显示默认选中值
document.form1.selCity.options.length = 1;
document.form1.selChengzhen.options.length = 1;
//循环读取份省包含城市的份数组,添加到第二级联
for(var i in cityList[provinceIndex])
{
op=new Option(cityList[provinceIndex][i],cityList[provinceIndex][i]);
document.form1.selCity.options.add(op);
}
}
//选择城镇---三级联
function selctChengzhen()
{
//cityList['云南省']= new Array();
cityList['云南省']['昆明市']=['盘龙区','五华区'];
cityList['云南省']['大理市']=['漾濞彝族自治县','宾川县'];
cityList['陕西省']['西安市']=['莲湖区','新城区','碑林区','灞桥区','未央区','雁塔区'];
cityList['陕西省']['安康市']=['宁陕县','石泉县','白河县','岚皋县'];
cityList['陕西省']['榆林市']=['靖边县','神木县','定边县'];
//提取二级连选中的值
var cityIndex=document.form1.selCity.value;
var oopp;
//清空第三级联的列表
document.form1.selChengzhen.options.length=1;
//循环读取添加到三级联
for(var j in cityList[provinceIndex][cityIndex])
{
oopp=new Option(cityList[provinceIndex][cityIndex][j],cityList[provinceIndex][cityIndex][j]);
document.form1.selChengzhen.options.add(oopp);
}
}
</script>
</head>
<body>
<div align="center">
<form id="form1" name="form1" method="post" action="">
<select name="selProvince" id="select" οnchange="selectCity()">
<option value=""selected="selected">--请选择省份--</option>
<option value="陕西省" >陕西省</option>
<option value="云南省" >云南省</option>
</select>
<select name="selCity" id="select2" οnchange="selctChengzhen()">
<option value=""selected="selected">--请选择城市--</option>
</select>
<select name="selChengzhen" id="select3">
<option value=""selected="selected">--请选择市县--</option>
</select>
</form>
</div>
</body>
</html>