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

前端技术 2023/09/09 JavaScript

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

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

运行效果截图如下：

在线演示地址如下：

http://demo.phpstudy.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.phpstudy.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)?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程序设计有所帮助。

本文地址：https://www.stayed.cn/item/23396

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案