select列表框关联,类似:列表框1选择省份,列表框2内容为该省城市

<html>
<head>
<script language=javascript>
var arr="浙江|江苏|安徽|江西";var arr0 = "杭州|宁波|温州|绍兴"; //这些数据可以从数据库中取得
var arr1 = "南京|苏州|无锡|常州";
var arr2 = "合肥|翕县|黄山|祁门";
var arr3 = "南昌|九江|赣州|上饶"; var arr00 = "杭州A区|杭州B区"; 
var arr01 = "宁波A区|宁波B区"; 
var arr02 = "温州A区|温州B区"; 
var arr03 = "绍兴A区|绍兴B区"; var arr10 = "南京A区|南京B区"; 
var arr11 = "苏州A区|苏州B区"; 
var arr12 = "无锡A区|无锡B区"; 
var arr13 = "常州A区|常州B区"; var arr20 = "合肥A区|合肥B区"; 
var arr21 = "翕县A区|翕县B区"; 
var arr22 = "黄山A区|黄山B区"; 
var arr23 = "祁门A区|祁门B区"; var arr30 = "南昌A区|南昌B区"; 
var arr31 = "九江A区|九江B区"; 
var arr32 = "赣州A区|赣州B区"; 
var arr33 = "上饶A区|上饶B区"; //alert(eval("arr"+2+1));
function AddOptions(dltObj,arrObj)
{
dltObj.innerHTML="";
var arrLocation=arrObj.split("|");
for(var i=0;i<arrLocation.length;i++){
var opt=document.createElement("OPTION");
dltObj.add(opt);
opt.value=i;
opt.text=arrLocation[i];
}
}
function init(){
AddOptions(dltProvince,eval('arr'));
AddOptions(dltCity,eval('arr'+dltProvince.selectedIndex));
AddOptions(dltArea,eval('arr'+dltProvince.selectedIndex+dltCity.selectedIndex));
ShowValue();
}
function ShowValue(){
var dltAr=document.getElementById("dltArea");
var hidId=document.getElementById("OutValue");
var txtText=document.getElementById("txtOutText");
hidId.value=dltAr.options[dltAr.selectedIndex].value;
txtText.value=dltAr.options[dltAr.selectedIndex].text;}
</script>
</head>
<body onLoad="init();">
<table width="300" cellpading="0" cellspacing="0" border="2">
<tr>
<td width="100"><select id="dltProvince" onchange="AddOptions(dltCity,eval('arr'+dltProvince.selectedIndex));AddOptions(dltArea,eval('arr'+dltProvince.selectedIndex+dltCity.selectedIndex));ShowValue();" style="width:100%"></select>
</td>
<td width="100"><select id="dltCity" onchange="AddOptions(dltArea,eval('arr'+dltProvince.selectedIndex+dltCity.selectedIndex));ShowValue();" style="width:100%"></select>
</td>
<td width="100"><select id="dltArea" style="width:100%" onchange="ShowValue()"></select></td>
<td width="100">
<input type="hidden" id="OutValue" value="">
<input type="text" id="txtOutText" style="width:100%">
</td>
</tr>
</table>
</body>
</html>

解决方案 »

  1.   

    <SCRIPT LANGUAGE="JavaScript">
    <!--
    areaitem=new Array(); 
    areaitem[0]=new Array('河南','');
    areaitem[1]=new Array('河南','郑州');
    areaitem[2]=new Array('河南','信阳');
    areaitem[3]=new Array('河南','南阳');
    areaitem[4]=new Array('河南','鹤壁');
    areaitem[5]=new Array('河南','濮阳');areaitem[6]=new Array('河北','');
    areaitem[7]=new Array('河北','石家庄');
    areaitem[8]=new Array('河北','保定');
    areaitem[9]=new Array('河北','张家口');
    areaitem[10]=new Array('河北','秦皇岛');
    areaitem[11]=new Array('河北','沧州');areaitem[12]=new Array('湖南','');
    areaitem[13]=new Array('湖南','长沙');
    areaitem[14]=new Array('湖南','常德');
    areaitem[15]=new Array('湖南','益阳');
    areaitem[16]=new Array('湖南','株州');areaitem[17]=new Array('湖北','');
    areaitem[18]=new Array('湖北','武汉');
    areaitem[19]=new Array('湖北','孝感');
    areaitem[20]=new Array('湖北','黄石');
    areaitem[21]=new Array('湖北','咸宁');
    areaitem[22]=new Array('湖北','宜昌');areaitem[23]=new Array('广东','');
    areaitem[24]=new Array('广东','广州');
    areaitem[25]=new Array('广东','韶关');
    areaitem[26]=new Array('广东','潮州');
    areaitem[27]=new Array('广东','湛江');
    areaitem[28]=new Array('广东','揭阳');
    areaitem[29]=new Array('广东','茂名');
    areaitem[30]=new Array('广东','肇庆');
    areaitem[31]=new Array('广东','梅州');areaitem[32]=new Array('广西','');
    areaitem[33]=new Array('广西','南宁');
    areaitem[34]=new Array('广西','桂林');
    areaitem[35]=new Array('广西','柳州');
    areaitem[36]=new Array('广西','梧州');
    areaitem[37]=new Array('广西','玉林');
    areaitem[38]=new Array('广西','北海');
    areaitem[39]=new Array('广西','柳州');
    areaitem[40]=new Array('广西','梧州');
    areaitem[41]=new Array('广西','玉林');
    areaitem[42]=new Array('广西','北海');
    areaitem[43]=new Array('广西','柳州');
    areaitem[44]=new Array('广西','梧州');
    areaitem[45]=new Array('广西','玉林');
    areaitem[46]=new Array('广西','北海');
    areaitem[47]=new Array('广西','北海');
    areaitem[48]=new Array('广西','柳州');
    areaitem[49]=new Array('广西','梧州');
    areaitem[50]=new Array('广西','玉林');
    areaitem[51]=new Array('广西','北海');function remove()
    {
    for(var h=0;h<7;h++)
    {
    for(var j=0;j<document.form1.city.length;j++)
    {
    document.form1.city.remove(j);
    }
    }
    }
    function change(myform)
    {
    remove();
    var optional=document.createElement("option");
    optional.text="请选择";
    optional.value="";
    myform.city.add(optional);

    var flag=myform.province.value; for(var j=0;j<areaitem.length;j++)
    {
    if(areaitem[j][0]==flag && areaitem[j][1]!="")
    {
    var optional=document.createElement("option");
    optional.text=areaitem[j][1];
    optional.value=areaitem[j][1];
    myform.city.add(optional);
    }
    }
    }
    //-->
    </SCRIPT>
    <body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
    <table width="80%" border="0" cellspacing="0" cellpadding="5" align="center">
    <form name="form1">
      <tr align="center"> 
          <td> 省份
    <select name="province" onchange="change(document.form1);">
              <option value="" selected>请选择</option>
              <option value="河南">河南省</option>
              <option value="河北">河北省</option>
              <option value="湖南">湖南省</option>
              <option value="湖北">湖北省</option>
              <option value="广东">广东省</option>
              <option value="广西">广西省</option>
            </select>
          </td>
          <td> 城市
    <select name="city">
    <option selected value="">-请选择-</option>
    </select>
          </td>
      </tr>
    </form>
    </table>