三级联动问题


怎么把html代码和js代码分开，并可以调用到js代码的。<html>
<head>
<title>三级下拉联动超链接菜单</title>
<meta http-equiv=content-Type content="text/html;charset=gb2312">
</head>
<body>
<div align="center">
<form name="isc">
<table border="0" cellspacing="0" cellpadding="0">
<tr align="center">
<td nowrap height="11">
<select name="example" size="1" onChange="redirect(this.options.selectedIndex)">
<option selected>品牌</option>
<option>宝马</option>
<option>奥迪</option>
<option>奔驰</option>
<option>丰田</option>
<option>本田</option>
<option>奇瑞</option>
<option>比亚迪</option>
</select>
<select name="stage2" size="1" onChange="redirect1(this.options.selectedIndex)">         
<option value=" " selected></option>')         
<option value=" " selected>◤车系◢</option> 
 
</select>   
<select name="stage3" size="1" onChange="redirect2(this.options.selectedIndex)">        
<option value=" " selected></option>')         
<option value=" " selected>◤车型◢</option>   
   
</select></table> 
</form></div>   
<script language="JavaScript">
<!--
var groups=document.isc.example.options.length      
var group=new Array(groups)      
for (i=0; i<groups; i++)      
group[i]=new Array()      
      
group[0][0]=new Option("----车系----"," ");      
      
group[1][0]=new Option("120i"," ");      
group[1][1]=new Option("120i敞篷"," ");      
group[1][2]=new Option("130i"," ");      
group[1][3]=new Option("320i敞篷"," "); 
group[1][4]=new Option("320i硬顶"," "); 
group[1][5]=new Option("325i"," ");     
      
group[2][0]=new Option("奥迪TTRS2.0T"," ");      
group[2][1]=new Option("奥迪TTR2.0Tqu"," ");      
group[2][2]=new Option("奥迪TTR2.0T"," ");       
group[2][3]=new Option("奥迪TTCS2.0T?"," ");
      
var temp=document.isc.stage2      
         
function redirect(x){      
for (m=temp.options.length-1;m>0;m--)      
temp.options[m]=null      
for (i=0;i<group[x].length;i++){      
temp.options[i]=new Option(group[x][i].text,group[x][i].value)      
}      
temp.options[0].selected=true      
redirect1(0)      
}    var secondGroups=document.isc.stage2.options.length      
var secondGroup=new Array(groups)      
for (i=0; i<groups; i++) {      
secondGroup[i]=new Array(group[i].length)      
for (j=0; j<group[i].length; j++) {      
secondGroup[i][j]=new Array() }}      
      
secondGroup[0][0][0]=new Option("----车型----"," ");   
   
secondGroup[1][0][0]=new Option("车型",""); 
secondGroup[1][0][1]=new Option("2013款","http://www.autohome.com.cn/");
     
secondGroup[1][1][0]=new Option("车型"," ");      
secondGroup[1][1][1]=new Option("2011款","http://www.baidu.com/");      
     
      
secondGroup[1][2][0]=new Option("车型"," ");      
secondGroup[1][2][1]=new Option("2011款","../cgi/pagenew7.htm");      
      
      
secondGroup[1][3][0]=new Option("车型"," ");      
secondGroup[1][3][1]=new Option("2011款","../cgi/pagenew15.htm");    secondGroup[1][4][0]=new Option("车型"," ");      
secondGroup[1][4][1]=new Option("2011款","../cgi/pagenew15.htm"); secondGroup[1][5][0]=new Option("车型"," ");      
secondGroup[1][5][1]=new Option("2011款","../cgi/pagenew15.htm");   
      
      
secondGroup[2][0][0]=new Option("车型"," "); 
secondGroup[2][0][0]=new Option("2011款"," "); 
     
secondGroup[2][1][0]=new Option("车型"," ");      
secondGroup[2][1][1]=new Option("2011款","../pictures/cartoon/1.htm");      
      
secondGroup[2][2][0]=new Option("车型"," ");      
secondGroup[2][2][1]=new Option("2011款","../pictures/email/1.htm");      
var temp1=document.isc.stage3      
function redirect1(y){      
for (m=temp1.options.length-1;m>0;m--)      
temp1.options[m]=null      
for (i=0;i<secondGroup[document.isc.example.options.selectedIndex][y].length;i++){      
temp1.options[i]=new Option(secondGroup[document.isc.example.options.selectedIndex][y][i].text,secondGroup[document.isc.example.options.selectedIndex][y][i].value)      
}      
temp1.options[0].selected=true   
}   
function redirect2(){   
window.open(temp1.value,"","toolbar=no,location=yes,directories=no,status=no,menubar=no,scrollbars=yes, resizable=yes,copyhistory=yes,width=700,height=450");   
}   
//-->
</script>
</body>
</html>

解决方案 »

  1.   

    将js代码放入"xxx.js"文件中,然后使用下面的代码引用该js文件:
    <script type="text/javascript" src="js文件的路径">
    </script>
      

  2.   

    HTML中的代码<html>
    <head>
    <title>三级下拉联动超链接菜单</title>
    <script src="javascript.js"></script><meta http-equiv=content-Type content="text/html;charset=gb2312">
    </head>
    <body>
    <div align="center">
    <form name="isc">
    <table border="0" cellspacing="0" cellpadding="0">
    <tr align="center">
    <td nowrap height="11">
    <select name="example" size="1" onChange="redirect(this.options.selectedIndex)">
    <option selected>品牌</option>
    <option>宝马</option>
    <option>奥迪</option>
    <option>奔驰</option>
    <option>丰田</option>
    <option>本田</option>
    <option>奇瑞</option>
    <option>比亚迪</option>
    </select>
    <select name="stage2" size="1" onChange="redirect1(this.options.selectedIndex)">   
    <option value=" " selected></option>')   
    <option value=" " selected>◤车系◢</option>  
     
    </select>   
    <select name="stage3" size="1" onChange="redirect2(this.options.selectedIndex)">   
    <option value=" " selected></option>')   
    <option value=" " selected>◤车型◢</option>   
        
    </select></table>  
    </form></div>
    </body>
    </html>
    javascript.js中的代码var groups=document.isc.example.options.length   
    var group=new Array(groups)   
    for (i=0; i<groups; i++)   
    group[i]=new Array()   
        
    group[0][0]=new Option("----车系----"," ");   
        
    group[1][0]=new Option("120i"," ");   
    group[1][1]=new Option("120i敞篷"," ");   
    group[1][2]=new Option("130i"," ");   
    group[1][3]=new Option("320i敞篷"," ");  
    group[1][4]=new Option("320i硬顶"," ");  
    group[1][5]=new Option("325i"," ");   
        
    group[2][0]=new Option("奥迪TTRS2.0T"," ");   
    group[2][1]=new Option("奥迪TTR2.0Tqu"," ");   
    group[2][2]=new Option("奥迪TTR2.0T"," ");   
    group[2][3]=new Option("奥迪TTCS2.0T?"," ");
        
    var temp=document.isc.stage2   
        
    function redirect(x){   
    for (m=temp.options.length-1;m>0;m--)   
    temp.options[m]=null   
    for (i=0;i<group[x].length;i++){   
    temp.options[i]=new Option(group[x][i].text,group[x][i].value)   
    }   
    temp.options[0].selected=true   
    redirect1(0)   
    }   var secondGroups=document.isc.stage2.options.length   
    var secondGroup=new Array(groups)   
    for (i=0; i<groups; i++) {   
    secondGroup[i]=new Array(group[i].length)   
    for (j=0; j<group[i].length; j++) {   
    secondGroup[i][j]=new Array() }}   
        
    secondGroup[0][0][0]=new Option("----车型----"," ");   
        
    secondGroup[1][0][0]=new Option("车型","");  
    secondGroup[1][0][1]=new Option("2013款","http://www.autohome.com.cn/");
        
    secondGroup[1][1][0]=new Option("车型"," ");   
    secondGroup[1][1][1]=new Option("2011款","http://www.baidu.com/");   
        
        
    secondGroup[1][2][0]=new Option("车型"," ");   
    secondGroup[1][2][1]=new Option("2011款","../cgi/pagenew7.htm");   
        
        
    secondGroup[1][3][0]=new Option("车型"," ");   
    secondGroup[1][3][1]=new Option("2011款","../cgi/pagenew15.htm");   secondGroup[1][4][0]=new Option("车型"," ");   
    secondGroup[1][4][1]=new Option("2011款","../cgi/pagenew15.htm");  secondGroup[1][5][0]=new Option("车型"," ");   
    secondGroup[1][5][1]=new Option("2011款","../cgi/pagenew15.htm");   
        
        
    secondGroup[2][0][0]=new Option("车型"," ");  
    secondGroup[2][0][0]=new Option("2011款"," ");  
        
    secondGroup[2][1][0]=new Option("车型"," ");   
    secondGroup[2][1][1]=new Option("2011款","../pictures/cartoon/1.htm");   
        
    secondGroup[2][2][0]=new Option("车型"," ");   
    secondGroup[2][2][1]=new Option("2011款","../pictures/email/1.htm");   
    var temp1=document.isc.stage3   
    function redirect1(y){   
    for (m=temp1.options.length-1;m>0;m--)   
    temp1.options[m]=null   
    for (i=0;i<secondGroup[document.isc.example.options.selectedIndex][y].length;i++){   
    temp1.options[i]=new Option(secondGroup[document.isc.example.options.selectedIndex][y][i].text,secondGroup[document.isc.example.options.selectedIndex][y][i].value)   
    }   
    temp1.options[0].selected=true   
    }   
    function redirect2(){   
    window.open(temp1.value,"","toolbar=no,location=yes,directories=no,status=no,menubar=no,scrollbars=yes, resizable=yes,copyhistory=yes,width=700,height=450");   
    } 
    在html代码中红色字体的路径中确定js文件的相对路径 或绝对路径
      

  3.   

    <select name="stage2" size="1" onChange="redirect1(this.options.selectedIndex)">   
    <option value=" " selected></option>')   
    <option value=" " selected>◤车系◢</option>  
     
    </select>   
    <select name="stage3" size="1" onChange="redirect2(this.options.selectedIndex)">   
    <option value=" " selected></option>')   
    <option value=" " selected>◤车型◢</option>   
        
    </select>
      

  4.   

    这里是怎么调用的呢？
    <select name="stage2" size="1" onChange="redirect1(this.options.selectedIndex)">   
    <option value=" " selected></option>')   
    <option value=" " selected>◤车系◢</option>  
     
    </select>   
    <select name="stage3" size="1" onChange="redirect2(this.options.selectedIndex)">   
    <option value=" " selected></option>')   
    <option value=" " selected>◤车型◢</option>   
        
    </select>
      

  5.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <script src="area.js" type="text/javascript"></script>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title> 信息发布</title>
    <style type="text/css">
    <!--
    /*body{background-color:#eee}*/                             
    .chotitle {width: 750px;font-size:13px;margin: 0 auto;}
    .chotitle font{font-size:12px;}
    .chotitle a{font-size:15px;display:block;float:left;margin:0 15px;height:30px;line-height:30px;font-weight: bold;}
    .chotitle a:link{color:#000; text-decoration:none}
    .chotitle a:visited{color:#000; text-decoration:none}
    .chotitle a:hover{color:#fff;background:url(images/kuaijie.gif) no-repeat;}
    -->
    </style>
    </head>
    <body onLoad="setup();">
    <div style="width:980px; height:100%; margin:0 auto;">
    <div class="chotitle">
    <form id="senttype" name="formsent" method="post" style="margin:0;padding-top:15px">
    <table width="100%" border="0" cellspacing="0" cellpadding="7">
      <tr>
        <td width="13%">起&nbsp;&nbsp;点:</td>
        <td width="44%">
    <SELECT id="star_province" NAME="star_province"><option>省份</option></SELECT> 
       <SELECT id="star_city" NAME="star_city"><option>地级市</option></SELECT> 
       <SELECT id="star_county" NAME="star_county"><option>市、县级市、县</option>
       </SELECT> 
                   </td>
          </tr>
    </table>
    </form>
    </div>
    </div>
    </body>
    </html>
      

  6.   

    // JavaScript Document
    function Dsy()
    {
    this.Items = {};
    }
    Dsy.prototype.add = function(id,iArray)
    {
    this.Items[id] = iArray;
    }
    Dsy.prototype.Exists = function(id)
    {
    if(typeof(this.Items[id]) == "undefined") return false;
    return true;
    }function change(v,obj,init){
     var str="0";
     for(i=0;i<v;i++)
     { str+=("_"+(document.getElementById(obj[i]).selectedIndex-1));}; //属性可设置或返回下拉列表中被选选项的索引号,若有多个选择，则返回第一个
       var ss=document.getElementById(obj[v]);
       with(ss){
        length = 0;
        options[0]=new Option(init[v],init[v]);
        if(v  &&  document.getElementById(obj[v-1]).selectedIndex>0 || !v)
       {
          if(dsy.Exists(str)){
          ar = dsy.Items[str];
          for(i=0;i<ar.length;i++)
         options[length]=new Option(ar[i],ar[i]);
            if(v)
       options[1].selected = true;
       }
      }
      if(++v<star.length)
        {change(v,obj,init);}
     }
    }var dsy = new Dsy();
    dsy.add("0",["安徽","河南"]);dsy.add("0_0",["安庆","蚌埠","巢湖"]);
    dsy.add("0_0_0",["安庆市","怀宁县","潜山县","宿松县","太湖县","桐城市","望江县","岳西县","枞阳县"]);
    dsy.add("0_0_1",["蚌埠市","固镇县","怀远县","五河县"]);
    dsy.add("0_0_2",["巢湖市","含山县","和县","庐江县","无为县"]);dsy.add("0_1",["郑州","南阳","安阳"]);
    dsy.add("0_1_0",["郑郑","郑州县"]);
    dsy.add("0_1_1",["宛城区","卧龙区","西峡","南召"]);
    dsy.add("0_1_2",["安阳县","安阳区"]);var star=["star_province","star_city","star_county"];
    var optstar = ["省份","地级市","市、县级市、县"];
    function setup() 
      {
      for(i=0;i<star.length-1;i++){
       document.getElementById(star[i]).onchange=new Function("change("+(i+1)+",star,optstar)");
      }
      change(0,star,optstar);
      }