jsp+js实现的二级联动菜单

以前看朋友写二级联动菜单思路都是先取得大类的数据,当选择大类后用url传值的方式传给页面一个值,然后根据这个值从数据库取出相应的小类的值.一直觉得这个思路虽然直接,但好像要频繁的读取数据库,而且如果表单里有多个选项的话,有时候似乎并不方便.到网上找了静态的javascript联动菜单.改了改后,感觉还可以:

 

    原javascript代码:

         <SCRIPT language=javascript>
<!--
var subcat = new Array();
subcat[0] = new Array('no','大类','12')
subcat[1] = new Array('pinp','楼宇包装','louy')
subcat[2] = new Array('pinp','会场布置','meet')
subcat[3] = new Array('pinp','开日庆典','kai')
subcat[4] = new Array('pinp','婚庆礼仪','hun')
<!--changeselect1(5)-->
function changeselect1(locationid)
{
 form1.smallclass.length = 0; //初始化下拉列表 清空下拉数据
 for (i=0; i<subcat.length; i++) //legth=20
 {
  if (subcat[i][0] == locationid) //[0] [1] 第一列 第二列 subcat[i][2]为s2的value值
  {
   form1.smallclass.options[form1.smallclass.length] = new Option(subcat[i][1], subcat[i][2]);//建立option
  }
 }
}

//-->
</SCRIPT>

 

 一级分类：
<SELECT onChange="changeselect1(this.options[this.selectedIndex].value)" name="bigclass">
         <OPTION>=请选择=</OPTION> 
         <OPTION value="pinp">品牌策划</OPTION>
         <OPTION value="design">设计印刷</OPTION>
         <OPTION value="media">户外传媒</OPTION>
         <OPTION value="jiag">工艺加工</OPTION>
</SELECT>
         二级分类：
         <SELECT id="smallclass" name="smallclass">
         </SELECT>

 

 

----------------------------------------------------

     数据库中大类:bigclass:pid,pName

                     小类:smallclass:psid,pscName,pid

我的思路是:从数据库中取出大类与小类的值,填充在javascript里,这样只须读取一次数据,剩下的事就交给js去处理了.

定义两个ResultSet 对象rssml rsbig.上面JS代码更改后,

 

<SCRIPT language=javascript>
<!--
var subcat = new Array();
<%  int h=0;
    while(rssml.next())
    { %>
     
      subcat[<%=h%>] = new Array('<%= rssml.getInt("pcid")%>','<%= rssml.getString("pscName") %>','<%= rssml.getInt("psid") %>');     <%h++; } %>
<!--changeselect1(5)-->
function changeselect1(locationid)
{
 form1.smallclass.length = 0; //初始化下拉列表 清空下拉数据
 for (i=0; i<subcat.length; i++) //legth=20
 {
  if (subcat[i][0] == locationid) //[0] [1] 第一列 第二列 subcat[i][2]为s2的value值
  {
   form1.smallclass.options[form1.smallclass.length] = new Option(subcat[i][1], subcat[i][2]);//建立option
  }
 }
}

//-->
</SCRIPT>

 

<select name="bigclass" onChange="changeselect1(this.options[this.selectedIndex].value)">
<option>请选择大类</option>
<% while(rsbig.next())
      {%>
    <option value='<%= rsbig.getInt("pcid") %>'><%= rsbig.getString("pcName") %></option>
  <%} %>
</select>
&nbsp;
<select name="smallclass" id="smallclass">
<option>请选择小类</option>
</select>

 

发现速度确实快了,不过有个缺点就是但查看源代码时,很容易发现你数据库字段的一些对应值.