Web Front-end
JS Tutorial
js simulation of Taobao's multi-level selection menu implementation method_javascript skills
js simulation of Taobao's multi-level selection menu implementation method_javascript skills
The example in this article describes the implementation method of js simulating Taobao's multi-level selection menu. Share it with everyone for your reference. The details are as follows:
This is a multi-level selection menu code based on js that simulates Taobao. This menu simulates Taobao. It was Taobao in the early days. It is no longer available. This menu can be like a cascading menu. Select data level by level, and finally determine the data.
The screenshot of the running effect is as follows:
The online demo address is as follows:
http://demo.jb51.net/js/2015/js-ftaobao-select-menu-codes/
The specific code is as follows:
<!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)?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>
I hope this article will be helpful to everyone’s JavaScript programming design.
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
How to check where Taobao's shipping address is? How to check the shipping address of orders placed on Taobao app
Mar 12, 2024 pm 04:00 PM
The Taobao app can satisfy all your shopping problems. There are so many merchants and so many products waiting for you to choose. No matter what kind of products you want to buy, you can search and find them here. , allowing everyone to directly place orders and purchase, and all functions can be freely operated. When you place an order successfully, you only need to wait for the merchant to ship the goods and carry out logistics delivery. It is very convenient and many , everyone can choose to view the shipping locations of these products and know where their products are shipped. Especially when you purchase some electronic products, you can check some related shipping locations. information to avoid the problem of buying some refurbished machines.
How to reject messages from strangers on Taobao
Mar 02, 2024 am 08:40 AM
In the process of using Taobao, we will receive messages from some strange users. The following will introduce you to how to set up rejecting messages from strangers. 1. After opening Taobao on your mobile phone to enter the interface, click the "Message" item at the bottom to switch to it, and then click the "+" icon on the upper right to open it. 2. A window will pop up under the icon, click and select the "Message Settings" item. 3. There is a "Stranger Chat Settings" on the message settings page, click on it to enter. 4. Finally, you will see the "Reject messages from strangers" function in the interface you enter. Click the corresponding switch button behind it. When the button is set to color, it is turned on. When using Taobao, you will no longer receive messages from unknown users.
How to get Taobao free red envelope 2024
May 09, 2024 pm 03:22 PM
The 2024 Taobao free order event will be held three times a day. Everyone needs to place an order and pay for the corresponding amount of goods at the corresponding time. The free order amount will be distributed in the form of red envelopes of equal amounts. Next, we will bring you how to receive the Taobao free order red envelope in 2024: grab it For users who are free of charge, the red envelope qualification will be issued to the card and coupon package, which is in a state of activation; the web version of Taobao currently does not have the card and coupon package, and only displays the winning records of the free order event; the card and coupon package is in [Taobao APP-My Taobao] -My Rights-Red Envelope]. How to get red envelopes for free orders on Taobao 20241. For users who grab free orders, the red envelope qualifications will be distributed to the card and coupon packages, which are in a state of waiting for activation; 2. The web version of Taobao currently does not have card and coupon packages, and only displays the winning records of the free order activities. ;3. The card coupon package is in [Taobao APP-My Taobao-My Rights-Red Envelope]
How to turn off password-free payment on Taobao. How to cancel the setting method of password-free payment.
Mar 12, 2024 pm 12:07 PM
There are so many functions on Taobao APP. These functions exist so that everyone can get a better shopping experience. The large number of product types can well meet the shopping needs of different users. Everyone really wants to You can buy whatever you want. You can search by category or directly search for these products. There will be no problem. Everyone can shop online with confidence. We will provide you with value-for-money shopping services. It will definitely give you Everything you want. Of course, if you shop here, you will find a variety of shopping methods here that allow you to choose. Some people like the password-free payment function here, and some do not. I like it so much, but I think the security is not that high. Of course, everyone can cancel at any time.
How to change name on Taobao
Mar 24, 2024 pm 03:31 PM
The name change function allows users to freely change their names and nicknames in Taobao. Some users do not know how to change their names on Taobao. Just click on the Taobao account of the avatar in the settings in My Taobao to modify it. Next, the editor will bring it to you This is an introduction to how to change your name and nickname. If you don’t know yet, please download it and give it a try. Taobao usage tutorial How to change Taobao name Answer: Click on the Taobao account of the avatar in the settings in My Taobao to modify it. Details: 1. Enter Taobao and click [My Taobao] on the lower right. 2. Click the [Settings] icon on the upper right. 3. Click the avatar. 4. Click [Taobao Account] again. 5. Click [Modify Account Name], enter and modify it.
How to turn off red envelope reminder on Taobao
Apr 01, 2024 pm 06:25 PM
Taobao is a commonly used online shopping software for many friends. You usually place orders and purchase many things from Taobao. It provides users with a red envelope reminder function. Some friends want to turn it off, so hurry up and check out the PHP Chinese website. Take a look. List of steps to turn off red envelope reminders on Taobao 1. Open the personal center of Taobao APP and select the [Settings] button to enter the page. 2. Find the [Message Notification] option. Here you can select the message push switch. Find the red envelope message and turn off the switch. 3. Or you can turn off the notification permission of Taobao APP through the settings page of your mobile phone, so that all messages from Taobao will not enter the push and can only be seen after turning it on. 4. Users can set what types of messages they want to receive, which makes it easier to use.
How to check the total consumption amount on Taobao How to check the total consumption amount
Mar 12, 2024 pm 03:07 PM
If we usually need to do online shopping, we will all choose Taobao as a platform, which can fully meet all our shopping needs. It has a lot of resources for various commodities, and there are really all kinds of commodities. It is gathered on this platform. Everyone has found that there are many categories of products here, and you can choose them according to your own needs. You can buy whatever you want, so everyone will definitely buy it here. There are a lot of products, and the prices of these products are very different. All these shopping records can be saved, which can be convenient for everyone to check at any time. So if you know what you are shopping here, what exactly is it? How much money did you spend? You must be very curious. Below I will tell you
Will 'Taobao' free red envelope refunds be returned?
May 08, 2024 am 08:16 AM
When shopping on Taobao, we often use free red envelopes to enjoy discounts. But if we need a refund, will these free red envelopes be returned? Let's take a look at the answer to this question. Will Taobao's free red envelopes be refunded? Depending on the situation, when you receive a red envelope, the red envelope is in a pending activation state. Before redeeming the product, the to-be-activated red envelope is not activated and cannot be used temporarily. You will wait until receipt of the purchased goods is confirmed. , the red envelope that needs to be activated can be used. If there is a problem with the product after using the free red envelope and it needs to be returned, the return of the red envelope needs to be judged according to the actual situation: 1. Refund Rules 11. If a refund occurs after the red envelope is used, the red envelope will be returned in proportion. 2. If the red envelope is not overdue, the period of use of the returned red envelope is the original period of use. If it is overdue, it will be issued within 7 days.
