<html>
<head>
<title>三级联动下拉</title>
<script>
//根据选中省iD获取对应市
function getPro(province)
{
var provinceID=null;
for(var i=0;i<province.length;i++)
{
if(province.options[i].selected)
{
provinceID=province.options[i].value;
break;
}
}
if(provinceID!=null)
{
var city = document.forms[0].elements("selCity");
var zone = document.forms[0].elements("selZone");
clearSel(city);
clearSel(zone);
if(provinceID=="1")
{
var wuhan = createSel("10","武汉市");
var huangshi = createSel("11","黄石市");
city.add(wuhan);
city.add(huangshi);
}
else if(provinceID=="2")
{
var chengdu = createSel("21","成都");
var zhigong= createSel("22","自贡");
city.add(chengdu);
city.add(zhigong);
}
}
}
//根据选中市获取对应区
function getCity(selcity)
{
var cityID=null;
for(var i=0;i<selcity.length;i++)
{
if(selcity.options[i].selected)
{
cityID=selcity.options[i].value;
break;
}
}
if(cityID!=null)
{
var zone = document.forms[0].elements("selZone");
clearSel(zone);
if(cityID=="10")
{
var wuchang=createSel("101","武昌");
var hanyang=createSel("102","汉阳");
var hankou = createSel("103","汉口");
zone.add(wuchang);
zone.add(hanyang);
zong.add(hankou);
}
else if(cityID=="11")
{
var xisai = createSel("201","西赛山");
var huangshishi = createSel("202","黄石市内");
zone.add(xisai);
zone.add(huangshishi);
}
else if(cityID=="21")
{
var wuhou=createSel("210","武侯区");
var jijiang=createSel("211","锦江区");
zone.add(wuhou);
zone.add(jijiang);
}
else if(cityID=="22")
{
var one = createSel("221","自贡城市一");
var two= createSel("222","自贡城市二");
zone.add(one);
zone.add(two);
}
}
}
//创建option
function createSel(value,text)
{
var optn = document.createElement("option");
optn.value=value;
optn.text= text;
return optn;
}
//清空sel下拉
function clearSel(sel)
{
if(sel != null)
{
while(sel.length >0)
{
sel.removeChild(sel.options[sel.length-1]);
}
}
}
</script>
</head>
<body>
<form name="form1">
<center>
<select name="selPro" οnchange="getPro(this)">
<option value="0">--请选择--</option>
<option value="1">湖北省</option>
<option value="2">四川省</option>
</select>
<br/><br/><br/><br/>
<select name="selCity" onChange="getCity(this)">
<option>--请选择--</option>
</select>
<br/><br/><br/><br/>
<select name="selZone">
</select>
</center>
</form>
</body>
</html>
<head>
<title>三级联动下拉</title>
<script>
//根据选中省iD获取对应市
function getPro(province)
{
var provinceID=null;
for(var i=0;i<province.length;i++)
{
if(province.options[i].selected)
{
provinceID=province.options[i].value;
break;
}
}
if(provinceID!=null)
{
var city = document.forms[0].elements("selCity");
var zone = document.forms[0].elements("selZone");
clearSel(city);
clearSel(zone);
if(provinceID=="1")
{
var wuhan = createSel("10","武汉市");
var huangshi = createSel("11","黄石市");
city.add(wuhan);
city.add(huangshi);
}
else if(provinceID=="2")
{
var chengdu = createSel("21","成都");
var zhigong= createSel("22","自贡");
city.add(chengdu);
city.add(zhigong);
}
}
}
//根据选中市获取对应区
function getCity(selcity)
{
var cityID=null;
for(var i=0;i<selcity.length;i++)
{
if(selcity.options[i].selected)
{
cityID=selcity.options[i].value;
break;
}
}
if(cityID!=null)
{
var zone = document.forms[0].elements("selZone");
clearSel(zone);
if(cityID=="10")
{
var wuchang=createSel("101","武昌");
var hanyang=createSel("102","汉阳");
var hankou = createSel("103","汉口");
zone.add(wuchang);
zone.add(hanyang);
zong.add(hankou);
}
else if(cityID=="11")
{
var xisai = createSel("201","西赛山");
var huangshishi = createSel("202","黄石市内");
zone.add(xisai);
zone.add(huangshishi);
}
else if(cityID=="21")
{
var wuhou=createSel("210","武侯区");
var jijiang=createSel("211","锦江区");
zone.add(wuhou);
zone.add(jijiang);
}
else if(cityID=="22")
{
var one = createSel("221","自贡城市一");
var two= createSel("222","自贡城市二");
zone.add(one);
zone.add(two);
}
}
}
//创建option
function createSel(value,text)
{
var optn = document.createElement("option");
optn.value=value;
optn.text= text;
return optn;
}
//清空sel下拉
function clearSel(sel)
{
if(sel != null)
{
while(sel.length >0)
{
sel.removeChild(sel.options[sel.length-1]);
}
}
}
</script>
</head>
<body>
<form name="form1">
<center>
<select name="selPro" οnchange="getPro(this)">
<option value="0">--请选择--</option>
<option value="1">湖北省</option>
<option value="2">四川省</option>
</select>
<br/><br/><br/><br/>
<select name="selCity" onChange="getCity(this)">
<option>--请选择--</option>
</select>
<br/><br/><br/><br/>
<select name="selZone">
</select>
</center>
</form>
</body>
</html>