5 月 28
我有网开发后期一直没有时间仔细研究联动菜单的代码，因为网站需要可编辑的三级分类，于是建了三个表用于存储关联的三级菜单内容，这样联动菜单需要与数据库关联。搜集了相关资料，发现CF可用的现成代码几乎没有。今天发现琥珀网提供的javascript无限级联动菜单可拓展性不错，很容易就读懂了。但显示的菜单内容是固定的并没有调用数据库，而且显示内容与值相同，于是自己动手修改实现了自己需要的功能。
代码如下：
<script language=”javascript”>
function Menu(theform,menuid) {
/*——————*\
* 1.变量定义 *
/*——————*/ //定义菜单级别MenuClass,菜单长度数组MenuLenArr,菜单名称数组MenuArr,下级菜单数组SubMenuArr，菜单ID数组MenuIdArr
//增加定义菜单显示名称数组MenuArrName,下级菜单显示名称数组SubMenuArrName，菜单显示名称长度数组MenuLenArrName
var MenuClass,MenuLenArr,MenuArr,SubMenuArr,MenuIdArr,MenuArrName,SubMenuArrName,MenuLenArrName//定义分隔符：splitchar1,splitchar2
var splitchar1,splitchar2
//定义临时数组,子数组,数组长度,
//增加定义临时数组1,显示名称数组
var arr,arr1,subarr,arrlen,subarrname
/*——————-*\
* 2.变量赋值 *
/*——————-*/
MenuArr=new Array()
MenuLenArr=new Array()
SubMenuArr=new Array()
MenuIdArr=new Array()
MenuArrName=new Array()
SubMenuArrName=new Array()
MenuLenArrName=new Array()
SubMenuArrName=new Array()
//注意此处将原固定菜单选项内容替换成CF调用数据库内容
MenuArr[1]=”<cfoutput query=”menu1″>#menu1.menuID#|||</cfoutput>” //调用一级分类ID|||…
MenuArr[2]=”<cfoutput query=”menu2″>#menu2.menuID#///#menu2.SecondmenuID#|||</cfoutput>” //调用一级分类ID///二级分类ID|||…
MenuArr[3]=”<cfoutput query=”menu3″>#menu3.SecondmenuID#///#menu3.submenuID#|||</cfoutput>” //调用二级分类ID///三级分类ID|||…
//增加显示名称数组，用于区分提交表单时的ID和显示名称
MenuArrName[1]=”<cfoutput query=”menu1″>#menu1.menuID#|||</cfoutput>” //调用一级分类ID|||…
MenuArrName[2]=”<cfoutput query=”menu2″>#menu2.menuID#///#menu2.SecondmenuName#|||</cfoutput>” //调用一级分类ID///二级分类显示名称|||…
MenuArrName[3]=”<cfoutput query=”menu3″>#menu3.SecondmenuID#///#menu3.submenuName#|||</cfoutput>” //调用二级分类ID///三级分类显示名称|||…
MenuIdArr[1]=”sh1″
MenuIdArr[2]=”sh2″
MenuIdArr[3]=”sh3″
MenuClass=3 //定义共3级菜单
splitchar1=”|||”;
splitchar2=”///”;
/*——————–*\
* 3.生成数组 *
/*——————–*/
for(iii=1;iii<=MenuClass;iii++)
{
arr=MenuArr[iii].split(splitchar1);
len=arr.length;
subarr=new Array()
for (i=0;i<len;i++)
{
subarr[i]=arr[i].split(splitchar2);
}
len=subarr.length;
SubMenuArr[iii]=subarr
MenuLenArr[iii]=len
}
//增加此循环生成名称数组
for(iii=1;iii<=MenuClass;iii++)
{
arr1=MenuArrName[iii].split(splitchar1);
len1=arr1.length;
subarrname=new Array()
for (i=0;i<len1;i++)
{
subarrname[i]=arr1[i].split(splitchar2);
}
len1=subarrname.length;
SubMenuArrName[iii]=subarrname
MenuLenArrName[iii]=len1
}
//============更改下级菜单======================
var self,submenu,thislen,thisarr,thisarrname
//self本级菜单
//submenu子菜单
//theform:所在表单对象[type:object]
//menuid:本级菜单级别ID，如1级菜单则为1
self=eval(“document.”+theform.name+”.”+MenuIdArr[menuid])
submenu=eval(“document.”+theform.name+”.”+MenuIdArr[menuid+1])
thislen=MenuLenArr[menuid+1]
thisarr=SubMenuArr[menuid+1]
thisarrname=SubMenuArrName[menuid+1]
submenu.length=0
submenu.options.add(new Option( “—–请选择—–“,””));
for (i=0;i<thislen;i++)
{
if (thisarr[i][0] == self.value)
{
submenu.options.add(new Option(thisarrname[i][1], thisarr[i][1])); //此处将前一个thisarr[i][1]改为了thisarrname[i][1]显示名称
}
}
submenu.options[0].selected=true
//============更改下级以下菜单==============
var kkk
for(kkk=menuid+2;kkk<=MenuClass;kkk++)
{
submenu=eval(“document.”+theform.name+”.”+MenuIdArr[kkk])
submenu.length=0
submenu.options.add(new Option( “—–请选择—–“,””));
submenu.options[0].selected=true
}
}
</script> |
这样，在添加商品及管理员后台管理商品分类的时候，就可以使用这种无刷新页面的动态联动菜单进行三级菜单ID的写入了。