为什么我的下拉不能实现，变换功能。

大家好，我想实现下拉列表框选择后自动变换的功能，怎么实现不了，大家帮忙看下，谢谢。<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>选择列表</title>
<script language="javascript">function selectwo(){
var clsnum=0,newnum=0,i;
clsnum=3;
var 
selectName=document.form1.books.options[document.form1.books.selectedIndex].text;
NewOpt=new Array;
if(selectName=="山东省"){
NewOpt[0]=new Option("菏泽市");NewOpt[0].value=42;
NewOpt[1]=new Option("烟台市");NewOpt[1].value=45;
NewOpt[2]=new Option("威海市");NewOpt[2].value=48;
}
if(selectName=="河南省"){
NewOpt[0]=new Option("商丘市");NewOpt[0].value=42;
NewOpt[1]=new Option("郑州市");NewOpt[1].value=55;
NewOpt[2]=new Option("洛阳市");NewOpt[2].value=45;
}
if(selectName=="河北省"){
NewOpt[0]=new Option("邯郸市");NewOpt[0].value=40;
}
if(selectName=="北京市"){
NewOpt[0]=new Option("丰台区");NewOpt[0].value=48;
}
newnum=NewOpt.length;
lst=document.form1.bookx.options.length;
for(i=0;i<clsnum;i++) document.form1.bookx.options[i]=null;
for(i=0;i<newnum;i++) document.form1.bookx.options[i]=NewOpt[i];
document.form1.bookx.options[0].selected=true;
}
</script>
</head><body>
<form id="form1" name="form1" method="post" action="">
<table width="330" border="0" align="center" cellpadding="1" cellspacing="1">
  <tr>
    <td width="84">&nbsp;</td>
    <td width="239">&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>地址：</td>
    <td><label>
      <select name="select" id="books"  onchange="selectwo()">
        <option selected="selected">山东省</option>
        <option >河南省</option>
        <option >河北省</option>
        <option >北京市</option>
                  </select>
      <select name="select2" id="books" onchange="selectwo()">
        <option>菏泽市</option>
        <option>烟台市</option>
        <option>威海市</option>
      </select>
</label></td>
  </tr>
</table>
</form></body>
</html>

解决方案 »

  1.   

    建议找一些现成的成熟一点的级联下拉框吧
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>选择列表</title>
    <script language="javascript">function selectwo(){
    var clsnum=0,newnum=0,i;
    clsnum=3;
    var  
    selectName=document.form1.books.options[document.form1.books.selectedIndex].text;
    NewOpt=new Array;
    if(selectName=="山东省"){
    NewOpt[0]=new Option("菏泽市");NewOpt[0].value=42;
    NewOpt[1]=new Option("烟台市");NewOpt[1].value=45;
    NewOpt[2]=new Option("威海市");NewOpt[2].value=48;
    }
    if(selectName=="河南省"){
    NewOpt[0]=new Option("商丘市");NewOpt[0].value=42;
    NewOpt[1]=new Option("郑州市");NewOpt[1].value=55;
    NewOpt[2]=new Option("洛阳市");NewOpt[2].value=45;
    }
    if(selectName=="河北省"){
    NewOpt[0]=new Option("邯郸市");NewOpt[0].value=40;
    }
    if(selectName=="北京市"){
    NewOpt[0]=new Option("丰台区");NewOpt[0].value=48;
    }
    newnum=NewOpt.length;
    lst=document.form1.bookx.options.length;
    for(i=0;i<clsnum;i++) document.form1.bookx.options[i]=null;
    for(i=0;i<newnum;i++) document.form1.bookx.options[i]=NewOpt[i];
    document.form1.bookx.options[0].selected=true;
    }
    </script>
    </head><body>
    <form id="form1" name="form1" method="post" action="">
    <table width="330" border="0" align="center" cellpadding="1" cellspacing="1">
      <tr>
      <td width="84">&nbsp;</td>
      <td width="239">&nbsp;</td>
      </tr>
      <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      </tr>
      <tr>
      <td>地址：</td>
      <td><label>
      <select  name="books" onchange="selectwo()">
      <option selected="selected">山东省</option>
      <option >河南省</option>
      <option >河北省</option>
      <option >北京市</option>
      </select>
      <select  name="bookx" onchange="selectwo()">
      <option>菏泽市</option>
      <option>烟台市</option>
      <option>威海市</option>
      </select>
    </label></td>
      </tr>
    </table>
    </form></body>
    </html>
      

  2.   

    要写代码的人这点字母的变化是一定要能看出来的，实在看不出来的话，ultraedit跟word都有文本对比功能<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>选择列表</title>
    <script language="javascript">function selectwo(){
    var clsnum=0,newnum=0,i;
    clsnum=3;
    var  
    selectName=document.form1.books.options[document.form1.books.selectedIndex].text;
    NewOpt=new Array;
    if(selectName=="山东省"){
    NewOpt[0]=new Option("菏泽市");NewOpt[0].value=42;
    NewOpt[1]=new Option("烟台市");NewOpt[1].value=45;
    NewOpt[2]=new Option("威海市");NewOpt[2].value=48;
    }
    if(selectName=="河南省"){
    NewOpt[0]=new Option("商丘市");NewOpt[0].value=42;
    NewOpt[1]=new Option("郑州市");NewOpt[1].value=55;
    NewOpt[2]=new Option("洛阳市");NewOpt[2].value=45;
    }
    if(selectName=="河北省"){
    NewOpt[0]=new Option("邯郸市");NewOpt[0].value=40;
    }
    if(selectName=="北京市"){
    NewOpt[0]=new Option("丰台区");NewOpt[0].value=48;
    }
    newnum=NewOpt.length;
    lst=document.form1.bookx.options.length;
    for(i=0;i<clsnum;i++) document.form1.bookx.options[i]=null;
    for(i=0;i<newnum;i++) document.form1.bookx.options[i]=NewOpt[i];
    document.form1.bookx.options[0].selected=true;
    }
    </script>
    </head><body>
    <form id="form1" name="form1" method="post" action="">
    <table width="330" border="0" align="center" cellpadding="1" cellspacing="1">
      <tr>
      <td width="84">&nbsp;</td>
      <td width="239">&nbsp;</td>
      </tr>
      <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      </tr>
      <tr>
      <td>地址：</td>
      <td><label>
      <select  name="books" onchange="selectwo()">
      <option selected="selected">山东省</option>
      <option >河南省</option>
      <option >河北省</option>
      <option >北京市</option>
      </select>
      <select  name="bookx" onchange="selectwo()">
      <option>菏泽市</option>
      <option>烟台市</option>
      <option>威海市</option>
      </select>
    </label></td>
      </tr>
    </table>
    </form></body>
    </html>