用javascript实现三级联动

时间：2010-10-11 来源：共谱一曲

<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>

</select>
<br/><br/><br/><br/>
<select name="selZone">

</select>
</center>

</form>
</body>

</html>