关于级联下来框的问题，请高手帮忙看下吧

这是一个地区选择列表，初始的时候只有一个选择框，选中国后，出现第2个选择省份的框，选定省份后出现第3个选择城市的框，依次类推。 
现在要改成，初始的时候就出现4个下来框，第一个里面有中国可选，当选中国的时候，第2个里面加载省份，依次类推 我研究了1天，也没改成，关键代码如下，希望高手提写建议，帮忙了，谢谢了 
<script language="javascript"> 
function checkNewAddForm(f) 
{ 
if(document.all.regionData.value=="") document.all.regionData.value=document.all.addresslist.innerHTML; 
if(f.regionid.value=='0' || f.regionid.value=='' || f.regionid.value=='3027') 
{ 
alert("请选择完整地区信息！"); 
return false; 
} 
for(var i=0;i <f.length;i++) 
{ 
if(f[i].type!='hidden' && f[i].id!='region' && f[i].value=='') 
{ 
alert("请填写完整信息！"); 
f[i].focus(); 
return false; 
} 
              if(f[i].type!='hidden' && f[i].id!='Zip' && isNan(f[i].value)) 
{ 
alert("邮政编码必须是数字！"); 
f[i].focus(); 
return false; 
} } 
return true; 
} 
</script> 
  <tr> 
  <td>地区： <input type=hidden name="regionid" id="regionid" value=" <%=co("regionid")%>"> <input type="hidden" name="regionData" id="regionData" value=""> </td> 
  <td valign="middle"> <span id="addresslist"> <%=co("regionData")%> </span> <span> <select id="region" onchange="createSpanElement(this)" onblur="createSpanElement(this,true)"> </select> </span> </td> 
  <td> <font color=#FF0000>* </font>&nbsp;请选择收货人所在地区，以方便及时送达。 <iframe style="display:none;height:0px;width:0px;" id="datasourceframe" name="datasourceframe"> </iframe> </td> 
  </tr> 
<script language="javascript"> 
var getFrameElement,_ieversion=parseFloat(window.navigator.appVersion.substr(window.navigator.appVersion.indexOf('MSIE')+4));//zydsoft 
getFrameElement=_ieversion>5.01?getFrameElementV6:getFrameElementV5; 
var oAddress = document.getElementById("addresslist").children; if(!oAddress.length) 
getAdressList(0); 
else 
initAddressData(); function initAddressData() 
{ 
document.getElementById("region").style.visibility="hidden"; 
for(var i=0;i <oAddress.length;i++) 
{ 
var oList = oAddress[i].children; 
for(var j=0;j <oList.length;j++) 
if(!oList[j].style.display) 
{ 
oList[j].onclick = rebuildSelect; 
//oList[j].style.cursor = "hand"; 
//oList[j].style.textDecorationUnderline= true; 
//oList[j].style.color = "blue"; 
oList[j].onmouseover = spanOnmouseOver; 
oList[j].onmouseout = spanOnmouseOut; 
if(oList[j].innerText=="选择地区") oList[j].style.color = "red"; 
} 
} 
} function delSpanStyle() 
{ 
var dataStr; 
for(var i=0;i <oAddress.length;i++) 
{ 
var oList = oAddress[i].children; 
for(var j=0;j <oList.length;j++) 
{ 
if(!oList[j].style.display) 
oList[j].style.cssText = ""; 
} 
} 
} function getAdressList(oid) 
{ 
getFrameElement(datasourceframe).src = "/mod/addresslist.asp?rid=" + oid; 
} function createSelectElement(s) 
{ 
removeOptions(); 
if(!s) return document.getElementById("region").style.visibility="hidden"; 
creatOptionElement(document.getElementById("region"),0,"选择地区",true); 
var sarry = s.split(","); 
for(var k=0;k <sarry.length;k++) 
{ 
var sa = sarry[k].split("="); 
creatOptionElement(document.getElementById("region"),sa[0],sa[1]); 
} 
document.getElementById("region").focus(); 
} function removeOptions() 
{ 
if(document.getElementById("region").options.length) 
{ 
var l = document.getElementById("region").options.length; 
for(var i=0;i <l;i++) 
document.getElementById("region").options.remove(0); 
} 
} function createSpanElement(o,c) 
{ 
if(o.selectedIndex <0) return; 
document.getElementById("regionid").value = o.options[o.selectedIndex].value; 
var opSpan = document.createElement("SPAN"); 
opSpan.value = o.options[o.selectedIndex].value; 
opSpan.style.padding = "2px 5px 2px 0px"; 
for(var i=0;i <o.options.length;i++) 
{ 
var oSpan = document.createElement("SPAN"); 
oSpan.value = o.options[i].value; 
oSpan.innerText = o.options[i].innerText; 
//oSpan.style.border = "1px double black"; 
//oSpan.style.padding = "2px 5px 2px 5px"; 
oSpan.style.cursor = "hand"; 
oSpan.style.textDecorationUnderline= true; 
oSpan.style.color = "blue"; 
oSpan.onmouseover = spanOnmouseOver; 
oSpan.onmouseout = spanOnmouseOut; 
if(i!=o.selectedIndex) oSpan.style.display = "none"; 
if(i==o.selectedIndex) oSpan.onclick = rebuildSelect; 
if(oSpan.innerText=="选择地区") oSpan.style.color = "red"; 
opSpan.appendChild(oSpan); 
} 
addresslist.appendChild(opSpan); 
document.getElementById("regionData").value = document.getElementById("addresslist").innerHTML; 
if(!c) 
getAdressList(o.options[o.selectedIndex].value); 
else 
document.getElementById("region").style.visibility="hidden"; 
} function spanOnmouseOver() 
{ 
var e=window.event.srcElement; 
e.style.color = "red"; 
} function spanOnmouseOut() 
{ 
var e=window.event.srcElement; 
e.style.color = "blue"; 
} function rebuildSelect() 
{ 
var e=window.event.srcElement; 
var v=e.value, c=e.parentElement.children; 
var bt=false; 
removeOptions(); 
for(var i=0;i <c.length;i++) 
{ 
if(c[i].value==0) 
bt = true; 
else 
bt = false; 
creatOptionElement(document.getElementById("region"),c[i].value,c[i].innerText,bt); 
} 
removeData(v); 
document.getElementById("region").style.visibility=""; 
document.getElementById("region").focus(); 
} function removeData(v) 
{ 
var ochild = addresslist.children, ocl = ochild.length; 
for(var i=0;i <ocl;i++) 
{ 
if(ochild[i].value==v) 
{ 
var bb = i; 
break; 
} 
} 
for(var j=bb;j <ocl;j++) 
addresslist.removeChild(ochild[bb]); 
} function creatOptionElement(oSelect,v,t,st) 
{ 
var oOption = document.createElement("OPTION"); 
oSelect.options.add(oOption); 
oOption.innerText = t; 
oOption.value = v; 
oOption.selected = st; 
} function getFrameElementV6(id){ 
return id.frameElement; 
} function getFrameElementV5(id){ 
var i; for (i=0;i <document.frames.length;i++) 
if (document.frames(i)==id) 
break; 
if (i==document.frames.length) return; 
return document.all.tags('IFRAME')(i); 
} 
</script> 

解决方案 »

  1.   

    你代码有点乱
    给你个二级级联的，先看看原理，修改修改<html>
    <script type="text/javascript">
    var citys=[
    ["西安","咸阳","宝鸡","渭南","汉中"],
    ["深圳","广州","中山","东莞","惠州","佛山","珠海"],
    ["上海"]
    ];
    function getCity()
    {
      var sltProvince=document.getElementById("province");
      var sltCity=document.getElementById("city");
      sltCity.options.length=1;
      if(sltProvince.selectedIndex>0)
      {
        var provinceCity=citys[sltProvince.selectedIndex-1];
        for(var i=0; i<provinceCity.length; i++)
        {
          var city=new Option(provinceCity[i],i);
          sltCity.options.add(city);
        }
      }
    }
    </script>
    <body>
    <select name="province" id="province" onchange="getCity();" >
      <option value="0">请选择省份</option>
      <option value="1">陕西</option>
      <option value="2">广东</option>
      <option value="3">上海</option>
    </select>
    <select name="city" id="city">
      <option value="0">请选择城市</option>
    </select>
    </body>
    </html>