怎么把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>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf8">
<title>select三级联动</title>
<script language="JavaScript" type="text/javascript">
var data = {
"Aprilia": {
"RSV4FACTORY": ["a1", "a2", "a3", "a4", "a5"],
"RSVMILLER": ["b1", "b2", "b3", "b4", "b5"],
"TUONOR": ["c1", "c2", "c3", "c4", "c5"]
},
"BMW": {
"S1000RR": ["d1", "d2", "d3", "d4", "d5"],
"K1600GTGTL": ["e1", "e2", "e3", "e4", "e5"],
"K1300SRGT": ["f1", "f2", "f3", "f4", "f5"]
},
"BUELL": {
"1125R": ["g1", "g2", "g3", "g4"],
"1125CR": ["h1", "h2", "h3", "h4"],
"XB12R": ["i1", "i2", "i3", "i4"]
}
};
//页面加载时直接把第一个SELECT的数据添加进去
window.onload = function()
{
for(var item in data)
{
var options = document.createElement('option');
document.getElementById('brand').appendChild(options).value = item;
document.getElementById('brand').appendChild(options).text = item;
}
}
//第一个SELECT的onchange事件, 把数据添加到第二个SELECT
function firstchangeBrand()
{
//如果选项有变化，则清空
var model = document.getElementById('model');
model.length = 0;
//清空完毕再生成选项对应的数据
var option = document.createElement('option');
model.appendChild(option).value = "";
model.appendChild(option).text = "-";
var year = document.getElementById('year');
year.length = 0;
var optionyear = document.createElement('option');
year.appendChild(optionyear).value = "";
year.appendChild(optionyear).text = "-";
for(var item in data)
{
if(item == document.getElementById('brand').value)
{
for(var node in data[item])
{
var options = document.createElement('option');
model.appendChild(options).value = node;
model.appendChild(options).text = node;
}
}
}
}
//原理同上
function secondchangeModel()
{
var year = document.getElementById('year');
year.length = 0;
var option = document.createElement('option');
year.value = "";
year.text = "-";
for(var item in data)
{
for(var node in data[item])
{
if(node == document.getElementById('model').value)
{
for(var i = 0; i < data[item][node].length; i++)
{
var options = document.createElement('option');
year.appendChild(options).value = data[item][node][i];
year.appendChild(options).text = data[item][node][i];
}
}
}
}
}
//取得三个SELECT的值，然后赋给输入框，作为搜索条件
function getselectvalue()
{
var brand = document.getElementById('brand').value;
var model = document.getElementById('model').value;
var year = document.getElementById('year').value;
var bmy = brand+" "+model+" "+year;
document.getElementById('search').value = bmy;
//跳转用Ebay的规则
}
</script>
</head>
<body>
<input type="text" name="search" id="search">
<input type="submit" value="Search" onclick="getselectvalue()"><br>
<select name="brand" id="brand" onchange="firstchangeBrand()"><option>-</option></select>
<select name="model" id="model" onchange="secondchangeModel()"><option>-</option></select>
<select name="year" id="year"><option>-</option></select>
</body>
</html>