JAVASCRIPT可以实现以下功能吗？

通过下拉列表选择一个省份后，在另一个下拉列表自动出现这个省份的相关城市，JAVASCRIPT如何实现。

解决方案 »

  1.   

    try something like this:<script language="javascript">
    var provinceList = new Array(2);
    provinceList["Jiangsu"] = new Array("Nanjing","Suzhou","Wuxi");
    provinceList["Zhejiang"] = new Array("Hangzhou","Wenzhou");var sCurProvince;function init()
    {
      for (p in provinceList)
      {
              var opt = new Option(p,p);
      document.frmtest.province.options.add(opt);
      }
      
      changeProvince();
    }function changeProvince()
    {
      if (sCurProvince != document.frmtest.province.value)
      {
    sCurProvince = document.frmtest.province.value;
    document.frmtest.city.options.length = 0;
    for (var i=0; i < provinceList[sCurProvince].length; i++)
    {
      var opt = new Option(provinceList[sCurProvince][i],provinceList[sCurProvince][i]);
       document.frmtest.city.options.add(opt);
    }
      }
    }
    </script>
    <body onload="init()">
    <form name="frmtest">
    <select name="province" onchange="changeProvince()"></select><br>
    <select name="city">
    </select>
    </body>
      

  2.   

    我以前自己写了一个类似的演示程序段，现在提供给你，希望对你有帮助。
    附注：本栏还有本人写的一篇《动态生成select选项全接触》的文章，你要是
    用兴趣可以看一下。<HTML>
    <HEAD>
    <TITLE> New Document </TITLE>
    <META NAME="Generator" CONTENT="EditPlus">
    <META NAME="Author" CONTENT="">
    <META NAME="Keywords" CONTENT="">
    <META NAME="Description" CONTENT="">
    <style type="text/css">
    body{font-family:Courier New, Courier}
    select{font-size:8pt;font-family:Courier New, Courier}
    input{font-size:8pt;font-family:Courier New, Courier}
    </style>
    <SCRIPT LANGUAGE="JavaScript">
    <!--
    var Name=new Array(3);
    var Value=new Array(3);
    Name[1]=new Array("Zosatapo1","Zosatapo2","Zosatapo3","Zosatapo4");
    Name[2]=new Array("Reic Yang1","Reic Yang2","Reic Yang3","Reic Yang4");function change()
    {
    selIndex=document.all("test").selectedIndex;
    if(document.all("test").selectedIndex==0)
    return;for(i=document.all("test").options.length-1;i>-1;i--)
    {
    document.all("test").options.remove(i);
    }for(i=0;i<Name[selIndex].length;i++)
    {
    document.all("test").options.add(new Option(Name[selIndex][i],"name"+i));
    }}function changeEx(){
    for(i=document.all("sub").options.length;i>0;i--)
    {
    document.all("sub").options.remove(i-1);
    }
    if(document.all("main").selectedIndex==0){
    document.all("sub").options.add(new Option("==========","-1"));
    return;}
    selIndex=document.all("main").selectedIndex;for(i=0;i<Name[selIndex].length;i++)
    {
    document.all("sub").options.add(new Option(Name[selIndex][i],"name"+i));
    }}function reset(){
    for(i=document.all("test").options.length-1;i>-1;i--)
    {
    document.all("test").options.remove(i);
    }document.all("test").options.add(new Option("==========","-1"));document.all("test").options.add(new Option("Zosatapo","1"));document.all("test").options.add(new Option("Reic Yang","2"));}function display(object){
    alert(object.options[object.selectedIndex].text+" "+object.options[object.selectedIndex].value);
    }
    //-->
    </SCRIPT>
    </HEAD><BODY BGCOLOR="#FFFFFF">
    First Sample:<br><font color="blue">All items will change After you Selected!</font><br>
    <SELECT id="test"  onchange="change();">
    <option value="-1"  selected>==========
    <option  value="1">Zosatapo
    <option  value="2">Reic Yang
    </SELECT><input name="Reset Select" type="button" value="Reset Select" onclick="reset();" ><br><br>Second Sample:<br><font color="blue">You selected Item in Main Select will change the Sub select Content!</font><br>
    Main Select:<SELECT id="main"  onchange="changeEx();">
    <option value="-1"  selected>==========
    <option  value="1">Zosatapo
    <option  value="2">Reic Yang
    </SELECT>Sub Select:<SELECT id="sub" onchange="display(this);">
    <option value="-1"  selected>==========
    </SELECT><br><br>
    </BODY>
    </HTML>
      

  3.   

    <html>
    <body>
    <form name="form1">
    <script language=javascript>
    function a()
    {
    var i=document.form1.select1.selectedIndex;
    alert(i);
    switch(i)
    {
     case 1:
     document.form1.select2[0]=new Option("00");//此处可以自己设置相应的城市名称
     break;
     case 2:
     document.form1.select2[0]=new Option("10");//此处可以自己设置相应的城市名称
     break;
     case 3:
     document.form1.select2[0]=new Option("20");//此处可以自己设置相应的城市名称
     break;
     case 4:
     document.form1.select2[0]=new Option("30");//此处可以自己设置相应的城市名称
     break;
     case 5:
     document.form1.select2[0]=new Option("40");//此处可以自己设置相应的城市名称
     break;
    }
    }
    </script>
    <select name="select1" onchange="a()">
    <option></option>
    <option>000</option>
    <option>111</option>
    <option>222</option>
    <option>333</option>
    <option>444</option>
    </select>
    <select name="select2" size=6>
    </select>
    </form>
    </body>
    </html>
    这个比较明了一些，不过可能比较笨，试试看吧！卡卡。