js模拟淘宝网的多级选择菜单实现方法_javascript技巧-js教程-PHP中文网

首页

web前端

js教程

js模拟淘宝网的多级选择菜单实现方法_javascript技巧

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:44 PM

js 模拟淘宝菜单

本文实例讲述了js模拟淘宝网的多级选择菜单实现方法。分享给大家供大家参考。具体如下：

这是一款基于js模拟淘宝网的多级选择菜单代码，这款菜单是模拟淘宝网的，是很早时候的淘宝网，现在已经没有了，本款菜单可以像级联菜单那样一级一级的选择数据，最后确定出数据。

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/js-ftaobao-select-menu-codes/

具体代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>模拟淘宝网菜单选择</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css" media="all">
body *{
 font-size:14px;
 margin:0;
 padding:0;
}
#CategorySelector{
 clear:both;
 width:778px;
 height:220px;
 background-color:#FFF;
 margin-bottom:8px;
}
#CategorySelector ul{
 margin:0 3px 0 0;
 padding:0;
 border:1px solid #CCC;
 float:left;
 width:189px;
 height:218px;
 overflow:auto;
}
#CategorySelector ul.Blank{
 background-color:#F6F6F6;
}
#CategorySelector li{
 list-style-type:none;
 width:auto;
 height:20px;
 margin:0 1px !important;
 margin /**/:0 1px 0 -15px;
 padding:0;
 border:1px solid #FFF;
 line-height:20px;
 color:#444;
 text-indent:3px;
 cursor:default;
}
#CategorySelector li.Selected{
 background-color:#CAFFC0;
 border:1px solid #0A9800;
 color:#006623;
}
#CategorySelector li.IsParent{
 background-image:url(http://files.jb51.net/file_images/article/201508/201581893903737.gif);
 background-position:99% 50%;
 background-repeat:no-repeat;
}
#CategorySelector li.RecentUsed{
 color:#170;
}
#CategoryTitle{
 clear:both;
 width:778px;
 background-color:#FFF;
}
#CategoryTitle ul{
 float:left;
}
#CategoryTitle li{
 margin:0 3px 0 0;
 float:left;
 border:1px solid #CCC;
 width:189px;
 color:#0063C8;
 font-weight:bold;
 border-bottom:0px;
 height:23px;
 line-height:23px;
}
</style>
</head>
<body>
<div id="CategoryTitle">
 <ul id="TitleContent">
  <li>  选择宝贝类别</li>
  <li>  选择游戏</li>
  <li>  选择游戏区域</li>
  <li>  选择服务器</li>
 </ul>
</div>
<div id="CategorySelector">
 <ul id="Category_ItemType" class="Blank">
 </ul>
 <ul id="Category_GameType" class="Blank">
 </ul>
 <ul id="Category_GameArea" class="Blank">
 </ul>
 <ul id="Category_GameServer" class="Blank">
 </ul>
</div>
<script language="javascript" type="text/javascript" id="commonjs">
Array.prototype.S = String.fromCharCode(2);
Array.prototype.in_array = function(e)
{
 var re = new RegExp(this.S+e+this.S);
 return re.test(this.S+this.join(this.S)+this.S);
}
function DataContent()
{ 
 this.Parent;  // Parent Tags
 this.ParentID;
 this.Children;  // Children Tags
 this.ChildrenID;
}
function DataServer()
{
 this.mList = new Array();
 this.ListCount = function(){return this.mList.length;}
 this.GetListObj = function(n)
 {
  if (n<this.ListCount()) return this.mList[n];
  return null;
 }
 this.Add = function(sParent,sParentID,sChildren,sChildrenID)
 {
  obj = new DataContent();
  obj.Parent  = sParent;
  obj.ParentID  = sParentID;
  obj.Children = sChildren;
  obj.ChildrenID = sChildrenID;
  this.mList[this.ListCount()] = obj;
 }
}
function getTriggerNode(e) {
 return (document.all)&#63;event.srcElement:e.target;
}
function getObject(objID)
{
 return document.getElementById(objID);
}
function CreateList(objName,objData,objSelected)
{
 var listBox = getObject(objName[0]);
 if(!listBox) return;
 var strOutput = "";
 var liClass = "";
 var id = 0;
 var op_txt = new Array();
 var op_val = new Array();
 var sub_val = new Array();
 if (objSelected[0])
 {
  for(i=0;i<objData.ListCount();i++)
   if(objData.GetListObj(i).ParentID==objSelected[0])
   {
    id = i;
    break;
   }
  if(i==objData.ListCount()){
   listBox.innerHTML="";
   listBox.className="Blank";
   return false;
  }
 }
 if(objName[1])
  for(i=0;i<objName[1].ListCount();sub_val.push(objName[1].GetListObj(i++).ParentID));
 tmpobj = objData.GetListObj(id);
 if (tmpobj.Children.length==0)
 {
  for(i=0;i<objData.ListCount();op_txt.push(objData.GetListObj(i).Parent),op_val.push(objData.GetListObj(i++).ParentID));
 }
 else
 {
  op_txt = tmpobj.Children;
  op_val = tmpobj.ChildrenID;
 }
 for(i=0;i<op_txt.length;i++)
 {
  if(sub_val.in_array(op_val[i]))
   liClass = "IsParent";
  if(op_val[i] == objSelected[1]){
   liClass += " Selected";
  }
  strOutput += '<li id="'+objName[0]+'__'+op_val[i]+'" class="'+liClass+'">'+op_txt[i]+'</li>';
  liClass = '';
 }
 listBox.innerHTML = strOutput;
 strOutput = "";
 listBox.className="";
}
function changeCategoryStyle(ulID,liCurr){
 if(lastSelectItem[ulID]){
  lastSelectItem[ulID].className=lastSelectItem[ulID].className.replace("Selected","").replace(/\s+$/,"");
 }
 liCurr.className += " Selected";
 lastSelectItem[ulID] = liCurr;
}
function changeCategory(evnt)
{
 var obj = getTriggerNode(evnt);
 var obj2 = obj;
 if(obj2.nodeName=="DIV") return (0);
 if(obj.nodeName != "LI")
  obj = obj.parentNode;
 while(obj2.nodeName != "UL")
  obj2 = obj2.parentNode;
 if(obj.nodeName != "LI") return;
 changeCategoryStyle(obj2.id,obj);
 var parentID = (obj.id).split("__")[1];
 switch(obj2.id)
 {
  case itemtype:
  break;
  case gametype:
   CreateList([gamearea,gameserverData],gameareaData,[parentID,0]);
  break;
  case gamearea:
   CreateList([gameserver,],gameserverData,[parentID,0]);
  break;
 }
}
var cselect = "CategorySelector";
var itemtype = "Category_ItemType";
var gametype = "Category_GameType";
var gamearea = "Category_GameArea";
var gameserver = "Category_GameServer";
var lastSelectItem = {itemtype:new Object(),gametype:new Object(),gamearea:new Object(),gameserver:new Object()};
var itemtypeData = new DataServer();
itemtypeData.Add("武器",1,[],[]);
itemtypeData.Add("防具",2,[],[]);
var gametypeData = new DataServer();
gametypeData.Add("魔力宝贝",1,[],[]);
gametypeData.Add("仙境传说",2,[],[]);
var gameareaData = new DataServer();
gameareaData.Add("魔力宝贝",1,["天歇","牧羊"],[1,2]);
gameareaData.Add("仙境传说",2,["上海","北京"],[3,4]);
var gameserverData = new DataServer();
gameserverData.Add("天歇",1,["平顶","山顶"],[1,2]);
gameserverData.Add("牧羊",2,["平顶2","山顶2"],[3,4]);
//gameserverData.Add("上海",3,["sfdsadfas","sdf"],[5,6]);
gameserverData.Add("北京",4,["asdf","asdff"],[7,8]);
CreateList([itemtype,],itemtypeData,[0,0]);
CreateList([gametype,gameareaData],gametypeData,[0,0]);
getObject(cselect).onclick = changeCategory;
</script>
</body>
</html>

登录后复制

希望本文所述对大家的javascript程序设计有所帮助。

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7921

Java教程

1652

CakePHP 教程

1411

Laravel 教程

1303

PHP教程

1248

显示更多

Related knowledge

怎么看淘宝的发货地在哪里查看淘宝app下单发货地址的方法 Mar 12, 2024 pm 04:00 PM

　　淘宝app上都能够满足大家的一切购物方面的问题，这里超多的商家，超多的一些宝贝，都能够等着大家进行选择，无论大家想要买一些什么样的商品，都能够在这里搜索找到，让大家直接的下单购买，全方面的一些功能，都能够自由的进行操作哦，当大家下单成功的话，大家只需要等待商家发货，进行物流的配送即可，非常的方便，很多的时候，大家都能够选择查看到这一些商品的发货地，知道自己的这一些商品到底是哪里进行发货，尤其是对于大家购买一些电子产品的时候，都能查询一些相关的发货地的信息，避免自己买到的是一些翻新机的问题，相

淘宝免单红包领取方法2024 May 09, 2024 pm 03:22 PM

2024淘宝免单活动每日三场，大家需要在对应时间下单付款对应金额的商品，免单金额是以等额红包形式发放，接下来给大家带来了淘宝免单红包领取方法2024：抢到免单的用户，红包资格将发放至卡券包，为待激活状态；网页版淘宝暂无卡券包，仅做免单活动的中奖记录的展示；卡券包在【淘宝APP-我的淘宝-我的权益-红包】。淘宝免单红包领取方法20241、抢到免单的用户，红包资格将发放至卡券包，为待激活状态；2、网页版淘宝暂无卡券包，仅做免单活动的中奖记录的展示;3、卡券包在【淘宝APP-我的淘宝-我的权益-红包】

淘宝如何拒收陌生人消息 Mar 02, 2024 am 08:40 AM

使用淘宝的过程中我们会收到一些陌生用户发来的消息。下面为大家介绍一下设置拒收陌生人消息的方法。1.打开手机中的淘宝进入界面后，在底部点击“消息”这一项切换进入，再在右上方点击“+”图标打开。2.这时图标下会弹出一个窗口，在里面点击选择“消息设置”这一项。3.在消息设置页面里有一个“陌生人聊天设置”，在它的上面点击进入。4.最后在进入的界面里会看到“拒收陌生人消息”的功能，在它的后面点击对应的开关按钮。当按钮设置为彩色即为开启，使用淘宝时就不会再接收到陌生用户发来的消息。

淘宝怎么关闭免密支付取消免密支付的设置方法 Mar 12, 2024 pm 12:07 PM

　　淘宝APP上的功能超多，这些功能的存在，都是为了大家可以获得更好的购物体验，超多的一些商品种类，都是可以很好的满足不同用户们的购物需求，大家真的想买啥，就买啥，大家按类查找或者是直接的搜索查看这些商品，都是没有任何问题的存在，大家都能够放心的进行网购，给大家带来物超所值的购物服务，绝对给你们想要的一切哦，当然大家在这里购物的话，都能够发现这里多种的一些购物方式，是可以让大家进行选择，对于这里的一些免密支付的这一功能，有人喜欢，也有人不是那么的喜欢，觉得安全性没有那么的高，当然大家都能随时取消

淘宝怎么改名字 Mar 24, 2024 pm 03:31 PM

改名功能在淘宝中可以让用户自由改名字昵称，有些用户并不知道淘宝怎么改名字，在我的淘宝中的设置里点击头像的淘宝账号进行修改即可，接下来小编就为大家带来了改名字昵称方法的介绍，还不知道的用户快来下载试试看吧。淘宝使用教程淘宝怎么改名字答：在我的淘宝中的设置里点击头像的淘宝账号进行修改即可详情介绍：1、进入淘宝，点击右下【我的淘宝】。2、点击右上的【设置】图标。3、点击头像。4、再点【淘宝账号】。5、点击【修改账号名】，输入并修改即可。

淘宝怎么关掉红包提醒 Apr 01, 2024 pm 06:25 PM

淘宝是很多小伙伴们常用的网购软件，平时很多东西各位都会从里面下单购买，里面给用户们提供了红包提醒功能，有的朋友们想要来关掉，那么就赶快来PHP中文网看看吧。淘宝关闭红包提醒步骤一览1、打开淘宝APP的个人中心，选择【设置】按钮进入页面。2、找到【消息通知】选项，在这里可以选择消息推送开关，找到红包消息将开关关闭就可以了。3、或者也可以通过手机的设置页面，将淘宝APP的通知权限关闭，这样所有来自淘宝的消息都不会进入推送，只有打开后才能看到。4、用户可以自己设置想要接收哪些类型的消息，这样使用起来也

淘宝怎么查消费总金额查看消费总额的方法 Mar 12, 2024 pm 03:07 PM

　　我们平常需要进行网购的话，大家都是会选择淘宝这一平台，完全都能够满足大家一切的购物方面的需求，拥有着超多的一些商品的资源，真的各种各样的一些商品，都是汇聚了在这一个平台上，大家发现这里的一些商品的类别超多，完全都能够根据自己的需求进行挑选，想买啥，就能买啥的，所以大家肯定都是会在这里购买到超多的一些商品，这些商品的价格，都是有着很大的一些不同，所有的这一些购物记录都能保存下来，能够方便大家随时的进行查询，那么你们知道自己在这里购物的话，到底是花了多少的一些钱呢，想必大家非常的好奇，下面小编都

推荐：优秀JS开源人脸检测识别项目 Apr 03, 2024 am 11:55 AM

人脸检测识别技术已经是一个比较成熟且应用广泛的技术。而目前最为广泛的互联网应用语言非JS莫属，在Web前端实现人脸检测识别相比后端的人脸识别有优势也有弱势。优势包括减少网络交互、实时识别，大大缩短了用户等待时间，提高了用户体验；弱势是：受到模型大小限制，其中准确率也有限。如何在web端使用js实现人脸检测呢？为了实现Web端人脸识别，需要熟悉相关的编程语言和技术，如JavaScript、HTML、CSS、WebRTC等。同时还需要掌握相关的计算机视觉和人工智能技术。值得注意的是，由于Web端的计

See all articles

js模拟淘宝网的多级选择菜单实现方法_javascript技巧

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题