JavaScript程序设计基础教程实训指导-10-5 实训案例名称：制作淘宝式多级选择菜单

实训案例名称制作淘宝式多级选择菜单本实例使用JavaScript实现类似淘宝网的多级选择菜单涉及的JavaScript语法如下

1.fromCharCode方法fromCharCode方法可接受一个指定的Unicode值然后返回一个字符串该方法是String的静态方法，字符串中的每个字符都由单独的数字Unicode编码指定

2.event.srcElementevent.srcElement用于设置或获取触发事件的对象引用对象以后，该对象的任何属性都可以使用示例代码如脚本10-5所示脚本10-

5.html!DOCTYPE htmlPUBLIC H-//W3C//DTD XHTML

1.0Transitional〃EN”“http:〃www.w

3.org/TR/xhtml1/DTD/xhtml1-transitional.dtdhtml xmlns=,,http-equiv=Content-Type content=text/html;charset=utf-8/style type=text/css media=,aH,body*{font-size:14px;margin:0;padding:O;#wrapper{cleanboth;width:778px;height:220px;background-color:#FFF;margin-bottom:8px;#wrapper ul{margin:03px00;padding:O;border:1px solid#CCC;float:left;width:189px;height:218px;overflow:auto;#wrapper ul.Blank{background-color:#F6F6F6;#wrapper li{list-style-type:none;width:auto;height:20px;margin:O1px iimportant;margin/*7:01px0-15px;padding:0;border:1px solid#FFF;line-height:20px;color:#444;text-indent:3px;cursondefault;#wrapper li.Selected{background-color:#CAFFCO;border:1px solid#0A9800;color:#006623;#wrapper li.lsParent{background-image:url/uploads/allimg/1110Zpublishitem_subcate_arrow.gif;background-position:99%50%;background-repeat:no-repeat;#wrapper li.RecentUsed{color:#170;#titleType{cleanboth;width:778px;background-color:#FFF;#titleType ul{float:left;#titleType li{margin:03px00;float:left;border:1px solid#CCC;width:189px;color:#0063C8;font-weight:bold;border-bottom:0px;height:23px;line-height:23px;/style/headbodydiv id=titleTypenul id=utitleHli请选择品牌/livli请选择折扣和服务v/livli请选择价格区间v/livli请选择材质v/li/ul/divdiv id=,wrapperMul id=,brandType class=,,Blank,/ulul id=serviceType,class=Blank/ulul id=HrangeType class=,Blank/ulul id-^uanlityType*class=Blank/ul/div/bodyscript language=javascript type=text/javascript id=commonjs Array.prototype.S=String.fromCharCode2;Array.prototype.in_array=functione{var re=new RegExpthis.S+e+this.S;return re.testthis.S+this.jointhis.S+this.S;function getTriggerNodee{return document.allevent.srcElement:e.target;function getObjid{return document.getElementByldid;}//初始化数据var brandTypeData=new Datalnfo;//品牌数据brandTypeData.addData与狼共舞brandTypeData.addData花花公子var serviceTypeData=new Datalnfo;//折扣和服务数据serviceTypeData.addData“全球购serviceTypeData.addData天猫,2J,”；var rangeTypeData=new Datalnfo;〃价格区间数据rangeTypeData.addData±^,1,[,,0-50,,,50-120H],[1,2];rangeTypeData.addData^a,,,2,[,,0-100,,；100-200],[3,4];var quanlityTypeData=new Datalnfo;〃材质数据quanlityTypeData.addData“0・50”,1,「棉”，“麻”「蚕丝”],[1,2,3];quanlityTypeData.addData“50・120*2,r^,^^],[4,5];quanMyTypeData.addData”0・100”3『棉丁麻丁蚕丝quanlityTypeData.addData100-200,,,4,[M^,^;fb],[8,9];function DataNode{this.parent;this.parentld;this.Children;this.childrenld;function Datalnfo{this.mList=new Array;this.ListCount=function{return this.mList.length;}this.GetListObj=functionn{if nthis.ListCount returnthis.mList[n];return null;this.addData=functionsParent,sParentld,sChildren,sChildrenlD{obj=new DataNode;obj.parent=sParent;obj.parentld=sParentld;obj.children=sChildren;obj.childrenld=sChildrenlD;this.mList[this.ListCount]=obj;〃构建菜单列表function buildMenuListobjName,objData,objSelected{console.logobjName;console.logobjData;console.logobjSelected;//buildMenuList[rangeType,quanlityTypeData],rangeTypeData,[parentld,O];var menuType=getObjobjName

[0];〃单击的当前菜单ifimenuType return;var strOutput=var liClass=m,;var id=0;var op_txt=new Array;var op_val=new Array;var sub_val=new Array;//子节点数组ifobjSelected

[0]{〃父节点fori=0;iobjData.ListCount;i++{ifobjData.GetListObji.parentld==objSelected

[0]{〃判断子节点的父级console.log,objSelected

[0]=,+objSelected

[0];id=i;break;ifi==objData.ListCount{menuType.innerHTML-,;menuType.className=Blank,;return false;ifobjName

[1]{〃说明有子节点，存放子节点的父级idfori=0;iobjName

[1].ListCount;sub_val.pushobjName

[1].GetListObji++.parentld;console.logid;tmpobj=objData.GetListObjid;//取出当前节点console.logtmpobj;if tmpobj.children.length==0{〃子节点长度为0fori=0;iobjData.ListCount;op_txt.pushobjData.GetListObji.parent,op_val.pushobjData.GetListObji++.parentld;}else{op_txt=tmpobj.children;〃子对象op_val=tmpobj.childrenld;〃孩子idfori=0;iop_txt.length;i++{ifsub_val.in_arrayop_val[i]{liClass=IsParent”;〃是父节点ifop_val[i]==objSelected

[1]{liClass+=Selected”;〃选中strOutput+=li id=,+objName

[0]+_,+op_val[i]+M class=,+liClass+,+op_txt[i]+/li,;liClass=menuType.innerHTML=strOutput;strOutput=m,;menuType.className-,H;〃菜单切换联动效果var menuSelect=口；function changeMenuevnt{var obj=getTriggerNodeevnt;var objSource=obj;//获取父节点whileobjSource.nodeName!=nUL{objSource=objSource.parentNode;//切换菜单选中样式var ulld=objSource.id;ifmenuSelect[ulld]{menuSelect[ulld].className=menuSelect[ulld].className.replace,Selected|;,obj.className+=Selected,;menuSelect[ulld]=obj;//创建子节点console.Iogobj.id;var parentld=obj.id.split_

[1];ifobjSource.id==serviceType{buildMenuList[,rangeTypeH quanlityTypeData],rangeTypeData,[parentld,O];J}else ifobjSource.id==nrangeTypen{buildMenuList[quanlityType,],quanlityTypeData,[parentld,0];buildMenuList[brandType,],brandTypeData,[O,O];buildMenuList[serviceType,rangeTypeData],serviceTypeData,[O,O];getObjwrapper.onclick=changeMenu;/script/html网页显示效果如图

10.5所示请选择品牌•请选择折扣和服务•请选择价格区间•请选择材质与狼共舞I0-50,棉全球购诙衿50-120麻蚕丝图

10.5淘宝式多级选择菜单效果。