javascript实现二级下拉菜单问题－急

二级联动下拉菜单正常，做了美化以后，一级下拉正常，二级就不正常了。请大家帮忙，以下是全部码
[code=JScript]
<style>
body, input
{
font-family: verdana;
font-size: 9pt;
}
h1
{
font-family: tahoma;
font-size: 22pt;
text-align: left;
}
pre
{
font-size: 9pt;
font-family: verdana;
border: 1px solid #006600;
width: 400px;
padding: 10px;
background: #000000;
color: #006600;
}
.CtlSelect
{
border: 1px solid #000000;
font-family: verdana;
height: 20px;
color: #ffffff;
background: #252525;
/*background:url({E5066804-650D-4757-9BA4-A92DB8817A18}0.jpg);*/
}
.selected
{
background: #cccccc;
color: #ffffff;
height: 20px;
}
.unselected
{
height: 20px;
color: #ffffff;
line-height: 120%;
border-bottom: 1px solid #006600;
}
.CtlSelect1
{
border: 1px solid #000000;
font-family: verdana;
height: 20px;
color: #ffffff;
background: #ffffff;
/*background:url({E5066804-650D-4757-9BA4-A92DB8817A18}0.jpg);*/
}
.selected1
{
background: #ffffff;
color: #ffffff;
height: 20px;
}
.unselected1
{
height: 20px;
color: #ffffff;
line-height: 120%;
border-bottom: 1px solid #003399;
}
.CtlSelect2
{
border: 1px solid #990000;
font-family: verdana;
height: 20px;
color: #990000;
background: #ffffff;
/*background:url({E5066804-650D-4757-9BA4-A92DB8817A18}0.jpg);*/
}
.selected2
{
background: #990000;
color: #ffffff;
height: 20px;
}
.unselected2
{
height: 20px;
color: #990000;
line-height: 120%;
border-bottom: 1px solid #990000;
}
.copyright
{
margin-top: 10px;
font-size: 9pt;
text-align: center;
color: #333;
font-weight: bold;
}
</style>
<%
dim rs
dim sql
dim count
set rs=server.createobject("adodb.recordset")
sql = "select * from SmallClass order by SmallClassID asc"
rs.open sql,conn,1,1
%>
<script language = "JavaScript">
var onecount;
subcat = new Array();
        <%
        count = 0
        do while not rs.eof
        %>
subcat[<%=count%>] = new Array("<%= trim(rs("SmallClassName"))%>","<%= trim(rs("BigClassName"))%>","<%= trim(rs("SmallClassName"))%>");
        <%
        count = count + 1
        rs.movenext
        loop
        rs.close
        %>
onecount=<%=count%>;function changelocation(locationid)
    {

    document.myform.SmallClassName.length = 0;
    var locationid=locationid;
    var i;
    for (i=0;i < onecount; i++)
        {
            if (subcat[i][1] == locationid)
            {
                document.myform.SmallClassName.options[document.myform.SmallClassName.length] = new Option(subcat[i][0], subcat[i][2]);
            }
        }

    }</script>

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

不是ASP的没办法实现这种效果。。
下面的就是完整的HTML代码，请高手帮看看。
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<link href="images/style.css" rel="stylesheet" type="text/css">
<style>
body, input
{
font-family: verdana;
font-size: 9pt;
}
h1
{
font-family: tahoma;
font-size: 22pt;
text-align: left;
}
pre
{
font-size: 9pt;
font-family: verdana;
border: 1px solid #006600;
width: 400px;
padding: 10px;
background: #000000;
color: #006600;
}
.CtlSelect
{
border: 1px solid #000000;
font-family: verdana;
height: 20px;
color: #ffffff;
background: #252525;
/*background:url({E5066804-650D-4757-9BA4-A92DB8817A18}0.jpg);*/
}
.selected
{
background: #cccccc;
color: #ffffff;
height: 20px;
}
.unselected
{
height: 20px;
color: #ffffff;
line-height: 120%;
border-bottom: 1px solid #006600;
}
.CtlSelect1
{
border: 1px solid #000000;
font-family: verdana;
height: 20px;
color: #ffffff;
background: #ffffff;
/*background:url({E5066804-650D-4757-9BA4-A92DB8817A18}0.jpg);*/
}.selected1
{
background: #ffffff;
color: #ffffff;
height: 20px;
}
.unselected1
{
height: 20px;
color: #ffffff;
line-height: 120%;
border-bottom: 1px solid #003399;
}
.CtlSelect2
{
border: 1px solid #990000;
font-family: verdana;
height: 20px;
color: #990000;
background: #ffffff;
/*background:url({E5066804-650D-4757-9BA4-A92DB8817A18}0.jpg);*/
}
.selected2
{
background: #990000;
color: #ffffff;
height: 20px;
}
.unselected2
{
height: 20px;
color: #990000;
line-height: 120%;
border-bottom: 1px solid #990000;
}
.copyright
{
margin-top: 10px;
font-size: 9pt;
text-align: center;
color: #333;
font-weight: bold;
}
</style>
<script language="JavaScript" type="text/JavaScript">

</script><script language = "JavaScript">
var onecount;
subcat = new Array();

subcat[0] = new Array("烧烤","餐饮","烧烤");

subcat[1] = new Array("洗澡","休闲","洗澡");

subcat[2] = new Array("小吃","餐饮","小吃");

onecount=3;function changelocation(locationid)
    {

    document.myform.SmallClassName.length = 0;
    var locationid=locationid;
    var i;
    for (i=0;i < onecount; i++)
        {
            if (subcat[i][1] == locationid)
            {
                document.myform.SmallClassName.options[document.myform.SmallClassName.length] = new Option(subcat[i][0], subcat[i][2]);
            }
        }

    }function AddItem(strFileName){
  document.myform.IncludePic.checked=true;
  document.myform.DefaultPicUrl.value=strFileName;
  document.myform.DefaultPicList.options[document.myform.DefaultPicList.length]=new Option(strFileName,strFileName);
  document.myform.DefaultPicList.selectedIndex+=1;
  if(document.myform.UploadFiles.value==''){
document.myform.UploadFiles.value=strFileName;
  }
  else{
    document.myform.UploadFiles.value=document.myform.UploadFiles.value+"|"+strFileName;
  }
}</script>
<SCRIPT LANGUAGE="JavaScript">
function $(objID)
{
return document.getElementById(objID);
};
function Offset(e)
{
var t = e.offsetTop;
var l = e.offsetLeft;
var w = e.offsetWidth;
var h = e.offsetHeight-2;while(e=e.offsetParent)
{
    t+=e.offsetTop;
    l+=e.offsetLeft;
}
return {
    top : t,
    left : l,
    width : w,
    height : h
}
}
//-----------------------------------------------
function simulateSelect(handlerFunction) { with(this)
{
this.IDs = [];
this.name = this;
this.value = null;
this.onchangeArgs = [];
this.onchange = handlerFunction;
this.height = 20;
this.width = null;
this.number = null;
this.ctlStyle = "CtlSelect";
this.selStyle = "selected";
this.unselStyle = "unselected";
this.elementPrefix = "e__";
this.inputPrefix = "i__";
this.containerPrefix = "c__";
this.buttonPrefix = "b__";
//   property for beta Version
//   can editable combox
this.readonly = true;
if( arguments.length>0 )
for(var i=0; i<arguments.length; i++)
onchangeArgs[i-1] = arguments[i];
return this;
}};
simulateSelect.prototype.init = function(ctlSelIDs) { with(this)
{
eval(name).append(ctlSelIDs);
eval(name).simulates();
}};simulateSelect.prototype.style = function() { with(this)
{
ctlStyle = arguments[0];
selStyle = arguments[1];
unselStyle = arguments[2];
}};
//-----------------------------------------------
simulateSelect.prototype.append = function(ctlSelIDs) { with(this)
{
if( ctlSelIDs.indexOf(",")>0 )
{
    var arrCtlSel = ctlSelIDs.split(",");
    for(var i=0; i<arrCtlSel.length; i++)
    {
      IDs.push(arrCtlSel[i]);
    }
}
else
IDs.push(ctlSelIDs);
}};
simulateSelect.prototype.checkupOnMouseDown = function(e) { with(this)
{
// here compatible mf.
var el = e ? e.srcElement : e.target;
if( el.id.indexOf(elementPrefix)>-1 ||
el.id.indexOf(inputPrefix)>-1 ||
el.id.indexOf(containerPrefix)>-1 ||
el.id.indexOf(buttonPrefix)>-1 )
{
    return;
}
else
{
    for(var i=0; i<eval(name).IDs.length; i++)
    if( $(containerPrefix + IDs[i]) )
    $(containerPrefix + IDs[i]).style.display = "none";
}}};
simulateSelect.prototype.simulates = function() { with(this)
{
for(var i=0; i<IDs.length; i++)
eval(name).simulate(IDs[i]);
}};
simulateSelect.prototype.simulate = function(ctlSelID) { with (this)
{
var input;
var button;
var object;
var offset;object = $(ctlSelID);
offset = Offset(object);
input = document.createElement("INPUT");
button = document.createElement("BUTTON");
button.setAttribute("id", buttonPrefix + ctlSelID);
//button.value = "⊿";
button.value = "6";
button.style.fontFamily = "Webdings, Marlett";
button.style.background = "";
button.onclick = input.onclick = function()
{
    this.blur();
    eval(name).expand(ctlSelID, offset);};
input.onselectstart = function()
{
    eval(name).expand(ctlSelID, offset);
    event.returnValue = false;

};input.setAttribute("id", inputPrefix + ctlSelID);
input.title = button.title = "click expand options";
input.style.cursor = button.style.cursor = "default";
input.className = button.className = ctlStyle;
input.style.width = (width>0 ? width : object.offsetWidth);
height ? input.style.height=button.style.height=height : "";
input.value = value = object[0].text;
if( readonly==true ) input.readOnly=true;// this method is only IE.
object.insertAdjacentElement("afterEnd",button);
object.insertAdjacentElement("afterEnd",input);
object.style.display = 'none';
}};
simulateSelect.prototype.expand = function(ctlSelID, offset) { with(this)
{
var div;
var object = $(ctlSelID);if( !$(containerPrefix + ctlSelID) )
{
    div = document.createElement("DIV");
    div.style.position = "absolute";
    div.style.display = "block";
    div.setAttribute("id", containerPrefix + ctlSelID);
    div.className = ctlStyle;
    div.style.left = offset.left;
    div.style.top = offset.top + offset.height;
    div.style.width = (width ? width : offset.width) + 20;
    if( number )
    {
      div.style.height = height * number;
      div.style.overflow = "auto";
    }
    document.body.appendChild(div);    for(var i=0; i<object.length; i++)
    {
      div = document.createElement("DIV");
      div.setAttribute("id", div.id = elementPrefix + ctlSelID + i);
      div.style.cursor = "default";      if( object[i].text==$(inputPrefix + ctlSelID).value )
      div.className = selStyle;
      else
      div.className = unselStyle;      div.innerText = div.title = object[i].text;
      div.style.height = height;
      div.setAttribute("value", object[i].value);      div.onmouseover = function()
      {
        for(var j=0; j<$(containerPrefix + ctlSelID).childNodes.length; j++)
        {
          if($(containerPrefix + ctlSelID).childNodes[j]==this)
          $(containerPrefix + ctlSelID).childNodes[j].className = selStyle;
          else
          $(containerPrefix + ctlSelID).childNodes[j].className = unselStyle;
        }
      };
      div.onclick = function()
      {
        $(inputPrefix + ctlSelID).value = this.innerText;
        $(containerPrefix + ctlSelID).style.display = "none";
changelocation(this.innerText);
        if( onchange && value!=$(inputPrefix + ctlSelID).value )
        {
          onchange.apply(this,onchangeArgs);
          value = $(inputPrefix + ctlSelID).value;

        }
      };
      $(containerPrefix + ctlSelID).appendChild(div);
    }
    return;
}if( $(containerPrefix + ctlSelID).style.display=="none" )
{
    for(var i=0; i<object.length; i++)
    {
      if( object[i].text==$(inputPrefix + ctlSelID).value )
      $(elementPrefix + ctlSelID + i).className = selStyle;
      else
      $(elementPrefix + ctlSelID + i).className = unselStyle;
    }
    $(containerPrefix + ctlSelID).style.display="block";
    return;
}if( $(containerPrefix + ctlSelID).style.display=="block" )
{
    $(containerPrefix + ctlSelID).style.display="none";
    return;
}
}};
simulateSelect.prototype.getValue = function(ctlSelID) { with(this)
{
if( $(inputPrefix + ctlSelID) )
return $(inputPrefix + ctlSelID).value;
else
return null;
}};
simulateSelect.prototype.addEvent = function(w, h) { with(this)
{
}};
//-----------------------------------------------
//window.onerror = Function("return true;");
//   IE only.
document.attachEvent("onmousedown", function() {
a.checkupOnMouseDown(event);
b.checkupOnMouseDown(event);
c.checkupOnMouseDown(event)
});
window.attachEvent("onload", function() {
window.a = new simulateSelect();
a.style("CtlSelect", "selected", "unselected");
a.init("s1");
//-------------------------------------------
window.b = new simulateSelect();
b.style("CtlSelect", "selected", "unselected");
b.init("s2");
//-------------------------------------------
window.c = new simulateSelect(s1onchange, "never-online", a.getValue('s1'));
c.style("CtlSelect2", "selected2", "unselected2");
c.width = 320;
c.init("s3");
});
function s1onchange(para, s)
{
alert("onchage handler fire " + para + s);
}
//-->
</SCRIPT>
<style type="text/css">

</style>
</head>
<body>
<script language="JavaScript"  src="images/systemfiles/div.js"></script>
<script language="JavaScript"  src="images/systemfiles/flash.js"></script>
<table width="1003" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td height="210" background="images/head_01.gif"><table width="100%"  border="0" cellspacing="0" cellpadding="0" height="210">
      <tr>
        <td width="78%" height="53"><table width="100%"  border="0" cellspacing="0" cellpadding="0" height="53">
          <tr>
            <td height="42"><table width="100%" border="0" cellspacing="0" cellpadding="0" height="42"><tr>
              <td width="500"><table width="500"  border="0" cellspacing="0" cellpadding="0">
                <form name="form1" method="post" action="checklogin.asp">
                  <tr>
                    <td width="16%" align="right">用户名：</td>
                    <td width="26%"><input type="text" name="user" class="input">
                    </td>
                    <td width="10%" align="right">密码：</td>
                    <td width="26%"><input type="password" name="pwd" class="input"></td>
                    <td width="22%" valign="bottom">    
                        <input name="login" type="image" src="images/login.gif" width="44" height="18" border="0"></td>
                  </tr>
                </form>
              </table></td>
              <td><img src="images/headright.gif" width="503" height="42" border="0" usemap="#Map"></td>
            </tr></table></td>
          </tr>
          <tr>
            <td></td>
          </tr>
        </table></td>
        <td width="22%"> </td>
      </tr>
      <tr>
        <td><table width="100%" height="157"  border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td width="78%" height="85"><table width="700" height="85"  border="0" cellspacing="0" cellpadding="0">
             <form method="post" action="class.asp" name="myform"> <tr>
                <td width="236" height="36"> </td>
                <td width="236"> </td>
                <td width="10"> </td>
                <td width="164"> </td>
                <td width="60"> </td>
              </tr>
              <tr>
                <td> </td>
                <td valign="top">
                    <select id="s1" name="BigClassName" onChange="changelocation(document.myform.BigClassName.options[document.myform.BigClassName.selectedIndex].value)" size="1">
                      <option selected value="休闲">休闲</option>

                      <option value="餐饮">餐饮</option>

                    </select>
                    <select name="SmallClassName" id="s0">


                      <option value="洗澡                                              ">洗澡                                              </option>

                    </select><input type="text" value="" id="t"></td>
                <td> </td>
                <td> </td>
                <td> </td>
              </tr></form>
            </table></td>
            <td width="22%" align="center"><table width="98%" height="85"  border="0" cellspacing="0" cellpadding="0">
              <tr>
                <td colspan="2" align="center" valign="bottom"><strong>2008 年 1 月 16 日</strong></td>
              </tr>
              <tr>
                <td height="18" colspan="2" align="center" valign="bottom"><strong> 农历丁亥年腊月初九猪 </strong>
</td>
              </tr>
              <tr>
                <td width="42%" align="right" valign="top"><table width="100%" height="7"><tr><td></td></tr></table><strong>
                  星期三
</strong></td>
                <td width="58%" align="left" valign="top"><iframe src="time.asp" width="90" height="20" align="top" marginheight="0" marginwidth="0" frameborder="0" scrolling="no"></iframe></td>
              </tr>
            </table></td>
          </tr>
          <tr>
            <td><table width="100%"  border="0" cellspacing="0" cellpadding="0" height="72">
              <tr>
                <td width="22%"> </td>
                <td width="78%"><table width="77%"  border="0" cellspacing="0" cellpadding="0" height="72">
                  <tr>
                    <td> </td>
                    <td> </td>
                    <td> </td>
                    <td> </td>
                    <td> </td>
                    <td> </td>
                    <td> </td>
                    <td> </td>
                  </tr>
                  <tr>
                    <td> </td>
                    <td> </td>
                    <td> </td>
                    <td> </td>
                    <td> </td>
                    <td> </td>
                    <td> </td>
                    <td> </td>
                  </tr>
                </table></td>
              </tr>
            </table></td>
            <td align="center"> </td>
          </tr>
        </table></td>
        <td> </td>
      </tr>
    </table></td>
  </tr>
  <tr>
    <td><table width="1003" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td width="781" height="244"><table width="100%"  border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td><img src="images/head_02.gif" width="536" height="244"></td>
            <td><img src="images/head_03.gif" width="245" height="244"></td>
          </tr>
        </table></td>
        <td rowspan="2" background="images/head_04.gif"> </td>
      </tr>
      <tr>
        <td width="781"><table width="100%"  border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td><img src="images/未标题-1_05.gif" width="243" height="231"></td>
            <td><img src="images/未标题-1_06.gif" width="538" height="231"></td>
          </tr>
        </table></td>
        </tr>
    </table></td>
  </tr>
  <tr>
    <td height="70" background="images/head_06.jpg"> </td>
  </tr>
</table>
<map name="Map">
  <area shape="rect" coords="26,12,89,39" href="index.asp">
  <area shape="rect" coords="94,13,179,44" href="usercenter.asp">
</map>
</body>
</html>