SoFunction
Updated on 2025-02-28

JavaScript Levels object with three-level drop-down selection menu


<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,//Storing DOM references for selects at each level
sL: null,
tL: null,
l1: null,
l2: null,
l3: null,
$: function(id){
return (typeof id == "object") ? id : (id);
},
init: function(fID, sID, tID, l1, l2, l3){
= this.$(fID);
= this.$(sID);
= this.$(tID);
this.l1 = l1;
this.l2 = l2;
this.l3 = l3;
(new Option("Select",-1));//Add a "select" flag to the first-level menu
for (var i = 0; i < ; i++) {
var item = new Option(l1[i], i);
(item);
}
this.doLev2(); //Calling the doLev2 function to process the secondary menu
this.doLev3(); //Calling the doLev3 function to process the third-level menu
},
removeSTL: function(){ // Used to delete the menu items of the second and third levels
= 0;
= 0;
},
removeTL: function(){ // Used to delete the third level menu item
= 0;
},
doLev2: function(){ //Processing secondary menus
var that = this;
= function(){
(); //Delete the old second select
if ( == 0) {
(); // //Delete the old second select
}
else {
(new Option("Select", -1)); //Add a "select" flag to the secondary menu
//Get the array required for the second level
var items = that.l2[ - 1];
for (var i = 0; i < ; i++) { //Add a new select item in the second level
var item = new Option(items[i], i);
(item);
}
}
}
},
doLev3: function(){ //Processing third-level menu
var that = this;
= function(){
(); //Delete the old third's select
if ( == 0) {
(); //Delete the old third's select
}
else {
(new Option("Select", -1)); //Add a "select" flag to the third-level menu
//Get the array required for the third level
var items = that.l3[ - 1][ - 1];
for (var i = 0; i < ; i++) { //Add a new select item at the third level
var item = new Option(items[i], i);
(item);
}
}
}
}
}
onload = function(){
("first", "second", "third", level1, level2, level3); //Calling the init method of Levels
}
</script>