Home > Developer > JavaScript
JavaScript:
Copy codeThe Code is as follows:
<Script type = "text/javascript">
Var level1 = ["Beijing", "GuangZhou", "ShangHai"];
Var level2 = [["ZhaoYang", "TianTan", "GuGong"], ["Tianhe", "Panyu"], ["PuDong", "PuXi"];
Var level3 = [[["TianShan", "HuangShan"], ["TianTan1", "TianTan2"], ["GuGong1", "GuGong2", "GuGong3 ", "GuGong4"], [["TianHe1", "TianHe2"], ["PanYu1", "PanYu2"], [["PuDong1", "PuDong2"], ["PuXi1", "PuXi2"];
Var Levels = {
FL: null, // used to store DOM references of select at all levels
SL: null,
TL: null,
L1: null,
L2: null,
L3: null,
$: Function (id ){
Return (typeof id = "object ")? Id: document. getElementById (id );
},
Init: function (fID, sID, tID, l1, l2, l3 ){
This. fL = this. $ (fID );
This. sL = this. $ (sID );
This. tL = this. $ (tID );
This. l1 = l1;
This. l2 = l2;
This. l3 = l3;
This. fL. options. add (new Option ("Select",-1); // add a "select" flag to the level-1 menu.
For (var I = 0; I <l1.length; I ++ ){
Var item = new Option (l1 [I], I );
This. fL. options. add (item );
}
This. doLev2 (); // call the doLev2 function to process the level-2 menu.
This. doLev3 (); // call the doLev3 function to Process Level 3 menus.
},
RemoveSTL: function () {// used to delete level 2 and level 3 menu items
This. sL. options. length = 0;
This. tL. options. length = 0;
},
RemoveTL: function () {// used to delete Level 3 menu items
This. tL. options. length = 0;
},
DoLev2: function () {// Process Level 2 menu
Var that = this;
This. fL. onchange = function (){
That. removeSTL (); // Delete the select statement of the old second.
If (that. fL. selectedIndex = 0 ){
That. removeSTL (); // Delete the select statement of the old second.
}
Else {
That. sL. options. add (new Option ("Select",-1); // add a "select" flag to the level-2 menu.
// Obtain the array required for Level 2
Var items = that. l2 [that. fL. selectedIndex-1];
For (var I = 0; I <items. length; I ++) {// Add a new select entry for Level 2
Var item = new Option (items [I], I );
That. sL. options. add (item );
}
}
}
},
DoLev3: function () {// Process Level 3 menus
Var that = this;
This. sL. onchange = function (){
That. removeTL (); // Delete the select statement of the old third.
If (that. sL. selectedIndex = 0 ){
That. removeTL (); // Delete the select statement of the old third.
}
Else {
That. tL. options. add (new Option ("Select",-1); // add a "select" flag to the level-3 menu.
// Obtain the array required for level 3
Var items = that. l3 [that. fL. selectedIndex-1] [that. sL. selectedIndex-1];
For (var I = 0; I <items. length; I ++) {// Add Level 3 new select item
Var item = new Option (items [I], I );
That. tL. options. add (item );
}
}
}
}
}
Onload = function (){
Levels. init ("first", "second", "third", level1, level2, level3); // call the init method of Levels.
}
</Script>
HTML:
Copy codeThe Code is as follows:
<Form>
<Select id = "first">
</Select>
<Select id = "second">
</Select>
<Select id = "third">
</Select>
</Form>
DEMO code:
<! Doctype html public "-// W3C // dtd html 4.01 // EN" "http://www.w3.org/TR/html4/strict.dtd"> <ptml> <pead> <meta http-equiv = "Content-Type" content = "text/html; charset = iso-8859-1 "> <title> Untitled Document </title> </pead> <body> </ptml>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
