下拉列表两级连动的新方法（二）

下面代码即是VBScript代码在服务器端编译后的显示内容，如果我们把这段代码保存成静态文件（HTML）或JS文件，那么上一篇提出的问题就迎刃而解了。

<script language = "JavaScript">
var onecount;
subcat = new Array();
subcat[0] = new Array('娱乐频道',117,0,'04',1,'True');
subcat[1] = new Array('娱乐排名',183,117);
subcat[2] = new Array('综合娱乐',184,117);
subcat[3] = new Array('在线视听',185,117);
subcat[4] = new Array('时尚前沿',186,117);
subcat[5] = new Array('吃喝玩乐',187,117);
subcat[6] = new Array('艺术欣赏',188,117);
subcat[7] = new Array('奇闻趣事',189,117);
subcat[8] = new Array('美食天地',190,117);
subcat[9] = new Array('运动健身',191,117);
subcat[10] = new Array('宠物世界',192,117);
subcat[11] = new Array('美容保健',193,117);
subcat[12] = new Array('休闲购物',194,117);
subcat[13] = new Array('动漫卡通',195,117);
subcat[14] = new Array('明星工厂',196,117);
subcat[15] = new Array('服装服饰',197,117);
subcat[16] = new Array('快乐童年',198,117);
subcat[17] = new Array('休闲读物',199,117);
subcat[18] = new Array('休闲游戏',200,117);
subcat[19] = new Array('其它娱乐',202,117);
subcat[20] = new Array('我的空间',253,0);
subcat[21] = new Array('行业展示',114,0);
subcat[22] = new Array('行业排名',121,114);
subcat[23] = new Array('综合行业',122,114);
subcat[24] = new Array('汽车',123,114);
subcat[25] = new Array('房地产',124,114);
subcat[26] = new Array('IT',125,114);
subcat[27] = new Array('IT排名',148,125);
subcat[28] = new Array('综合IT',149,125);
subcat[29] = new Array('计算机',150,125);
subcat[30] = new Array('手机',151,125);
subcat[31] = new Array('数码产品',152,125);
subcat[32] = new Array('电子',153,125);
subcat[33] = new Array('通信',154,125);
subcat[34] = new Array('软件',155,125);
subcat[35] = new Array('广电',156,125);
subcat[36] = new Array('工控产品',157,125);
subcat[37] = new Array('系统集成',158,125);
subcat[38] = new Array('信息服务',160,125);
subcat[39] = new Array('传感器',232,125);
subcat[40] = new Array('网站服务',237,125);
subcat[41] = new Array('其它IT',159,125);
subcat[42] = new Array('家用电器',126,114);
subcat[43] = new Array('纺织',127,114);
subcat[44] = new Array('金融',128,114);
subcat[45] = new Array('食品',129,114);
subcat[46] = new Array('电信',130,114);
subcat[47] = new Array('生活用品',131,114);
subcat[48] = new Array('医药保健',132,114);
subcat[49] = new Array('礼品玩具',133,114);
subcat[50] = new Array('办公用品',134,114);
subcat[51] = new Array('能源',135,114);
subcat[52] = new Array('物流',136,114);
subcat[53] = new Array('机械',137,114);
subcat[54] = new Array('环保',138,114);
subcat[55] = new Array('化工',139,114);
subcat[56] = new Array('农产品',140,114);
subcat[57] = new Array('印刷包装',141,114);
subcat[58] = new Array('媒体广告',142,114);
subcat[59] = new Array('公共安全',144,114);
subcat[60] = new Array('图书音像',145,114);
subcat[61] = new Array('工业产品',146,114);
subcat[62] = new Array('其他行业',147,114);
subcat[63] = new Array('商业服务',115,0);
subcat[64] = new Array('资讯频道',118,0);
subcat[65] = new Array('教育频道',119,0);
subcat[66] = new Array('就业频道',120,0);
subcat[67] = new Array('交友频道',250,0);
subcat[68] = new Array('商业机会',251,0);
subcat[69] = new Array('大众点评',252,0);
subcat[70] = new Array('旅游频道',116,0);
subcat[71] = new Array('体育频道',260,0);
subcat[72] = new Array('科技频道',261,0);
subcat[73] = new Array('数码频道',262,0);
subcat[74] = new Array('健康频道',263,0);
subcat[75] = new Array('汽车频道',264,0);
subcat[76] = new Array('房产频道',265,0);
subcat[77] = new Array('时尚频道',266,0);
subcat[78] = new Array('手机频道',267,0);
subcat[79] = new Array('100名人榜',257,0);
subcat[80] = new Array('100品牌榜',256,0);
onecount=81;
</script>

好，那们就要用到ASP中的FSO组件了－－生成一个新的文件。

我们现在用ASP来生成一个JS文件：

set fso=server.CreateObject("scripting.filesystemobject")
path=server.MapPath("/")   //转换为物理路径
Set fout = fso.CreateTextFile(Path & "\tree.js",true) //生成tree.js文件，如果原文件存在，即覆盖原文件
fout.WriteLine "var onecount;"
fout.WriteLine "subcat = new Array();"
set rs=server.CreateObject("adodb.recordset")
rs.open "select * from tree ",conn,1,1
  count = 0
  do while not rs.eof 
     fout.WriteLine "subcat["&count&"] = new Array('"& rs("名称")&"',"& rs("ID号")&","& rs("上级ID")&");")
     count = count + 1
    rs.movenext
loop
rs.close
fout.WriteLine "onecount="&count&";"
fout.close 
set fout=nothing
set fso=nothing

OK！静态文件已经生成了，现在就是调用了。在相应的代码中调用此文件即可，如下：

function start()  
{
  var i;
  for (i=0;i < onecount; i++)
        {
           if (subcat[i][2] == 0)
            { //一级分类
              document.myform.aclass.options[document.myform.aclass.length] = new Option(subcat[i][0], subcat[i][1]);
   }
        }
}
  
function changelocation(locationid)  //两级联动
    {
    document.myform.nclass.length = 0; 

    var locationid=locationid;
    var i,j;
    for (i=0;i < onecount; i++)
        {
            if (subcat[i][2] == locationid)
            { //二级分类
              document.myform.nclass.options[document.myform.nclass.length] = new Option(subcat[i][0], subcat[i][1]);
             }
  
if (document.myform.nclass.length == 0)
  {
   for (i=0;i < onecount; i++)
    {
     if (subcat[i][1] == locationid)
     { 
      document.myform.nclass.options[document.myform.nclass.length] = new Option(subcat[i][0], subcat[i][1]);

     } 
    }
  }
    }

<body>...</body>中的代码如下：

<script language="jscript" src="tree.js"></script>

 一级分类：
                

<select name="aclass" size="1" id="aclass" style="width:80px" onChange="changelocation(document.myform.aclass.options[document.myform.aclass.selectedIndex].value)" class="wenbenkuang">
                <option value="" selected>请选择</option>
              </select>

二级分类：

<select name="nclass" class="wenbenkuang" style="width:80px" onChange="change(document.myform.nclass.options[document.myform.nclass.selectedIndex].value)" >
                  <option value="" selected>请选择</option>
                </select>

至此，所有工作已经结束了，这种方法减少了服务器的压力，也提高了访问速度。对于类别越多的代码，其访问速度越明显。