正常来讲,一般的站都涉及不到三级类,二级就足够了,但是一般购物的网站的级别的都很层次化,前阵子做了一个三级菜单连动,浪费的不少的时间,最终还是做出来了,发上来大家看看吧,比较傻瓜式的,易懂。。。
第一、我们先来确定连动菜单的元素
| <% sql = "select 产品名称,产品ID from 产品大类表" set execsql = conn.execute(sql) %> <select name="ordergame" id="ordergame" onChange="ld();ld2()"> <option value="" selected="selected">产品</option> <% if not execsql.bof or not execsql.eof then do while not execsql.eof %> <option value="<%=execsql(1)%>"><%=execsql(0)%></option> <% execsql.movenext loop %> </select> <% end if execsql.close set execsql = nothing %> <select name="orderarea" id="orderarea" onChange="ld2();"> <option value="" selected="selected">产品二级类</option> </select> <select name="orderequip" id="orderequip"> <option value="" selected="selected">产品三级类</option> </select> |
第二、然后将二级类、三级类数据读取出来,准备调用。
| <% sql = "select * from 产品二级类表" set rs = server.CreateObject("adodb.recordset") rs.open sql,conn,1,1 if not rs.bof or not rs.eof then areastr = "" for i=1 to rs.recordcount areastr = areastr & rs("一级大类id") & "-" & rs("二级类id") & "-" & rs("二级类名称") & "," if rs.eof then exit for rs.movenext next end if rs.close set rs = nothing sql = "select * from 产品三级类表" set rs = server.CreateObject("adodb.recordset") rs.open sql,conn,1,1 if not rs.bof or not rs.eof then equipstr = "" for i=1 to rs.recordcount equipstr = equipstr & rs("二级类id") & "-" & rs("三级类id") & "-" & rs("三级类名称") & "," if rs.eof then exit for rs.movenext next end if rs.close set rs = nothing %> |
第三、好了,将数据准备好后,我们可以利用js对数据进行调用。
| <script LANGUAGE="javascript"> <!-- arr_area = "<%=areastr%>".split(","); a = arr_area.length ar = new Array() for (i=0;i<a;i++){ ar[i] = arr_area[i].split("-"); } onecount = ar.length; arr_equip = "<%=equipstr%>".split(","); a2 = arr_equip.length ar2 = new Array() for (i=0;i<a2;i++){ ar2[i] = arr_equip[i].split("-"); } onecount2 = ar2.length; function ld() { document.form1.orderarea.length = 0 lid = form1.ordergame.value; for (i=0;i<onecount;i++) { if (ar[i][0] == lid) { document.form1.orderarea.options.add(new Option(ar[i][2], ar[i][1])); } } } function ld2() { document.form1.orderequip.length = 0; lid2 = form1.orderarea.value; for (i=0;i<onecount2;i++) { if (ar2[i][0] == lid2) { document.form1.orderequip.options.add(new Option(ar2[i][2], ar2[i][1])); } } } //--> </script> |
第四、完成操作,大家可以照猫画虎的试试,测试过的,肯定好用 。。。
原载: No.1网络工作室 http://www.noonenet.cn/
