<html>
<head>
<title>JS中的级联功能</title>
<script type="text/javascript">
//初始化省份
window.onload = function provinceInit()
{
var node = document.getElementById("province");
var provinceArr = ["安徽省","山东省","湖北省"];
node.options.length = 1;//设置下拉的个数
var newOption;
for(var i in provinceArr){
//option["value值","页面显示值"]
newOption = new Option(provinceArr[i],provinceArr[i]);
//node.add(newOption);
//循环添加到node
node.options.add(newOption);
}
}
//省份改变的时候,为city下拉赋值
function provinceChange()
{
var node=document.getElementById("city");
var cityList = new Array();
cityList["安徽省"] = ["安庆","芜湖","阜阳","马鞍山","亳州","池州","淮南"];
cityList["山东省"] = ["济南","青岛","淄博","枣庄","东营","烟台","潍坊"];
cityList["湖北省"] = ["武汉","宜昌","荆州","恩施","黄石","荆门","黄冈"];
var proValue = document.getElementById("province").value;
node.options.length = 1;//清空city的下拉
var newOption;
//注意这里是cityList[proValue]
for(var i in cityList[proValue]){
newOption = new Option(cityList[proValue][i],cityList[proValue][i]);
//node.options.add(newOption);
node.add(newOption);
}
node.selectedIndex = 0; //让select出现 "请选择城市"
}
function cityChange()
{
var node=document.getElementById("country");
var countryList = new Array();
countryList["安庆"] = ["望江","宿松","太湖","潜山","广安","雅安","眉山"];
countryList["芜湖"] = ["南陵","无为","繁昌","枣庄","东营","烟台","潍坊"];
var cityValue = document.getElementById("city").value;
node.options.length = 1;//清空city的下拉，防止城市已累加的形式下拉
var newOption;
for(var i in countryList[cityValue]){
newOption = new Option(countryList[cityValue][i],countryList[cityValue][i]);
node.add(newOption); //给县级下拉菜单赋值
}
}
</script>
</head>
<body>
<select name="province" id="province" onchange="provinceChange();">
<option value="0">--请选择省份--</option>
</select>
<select name="city" id="city" onchange="cityChange();">
<option value="0">--请选择城市--</option>
</select>
<select name="country" id="country">
<option value="0">--请选择县级--</option>
</select>
</body>
</html>