The second-level and multi-level (n-level) linkage drop-down list box in Javascript is updated. It supports two call Methods: IE6, Firefox, function, and Class. It supports N-level and is very common.

I spent a lot of time organizing and writing stuff. I was a little reluctant to release it. After the release, no copyright is added, which saves the trouble of deleting: d

Features: strong versatility, achieves script and HTML Separation

I will not give the document. If you want to study the code, read my previous blog.

I. Files and source code
CS. js
You can use either function or class to call a function.

<! --
/**
* Function to setup a cascadeselect
* @ Version build 20060324
* @ Author kimsoft (jinqinghua [at] gmail.com)
* @ Update
*/

/**
* Setupcascadeselect
* @ Param cascadeselect select object
* @ Param parent data index of parent
* @ Param nodes array contains data with structure [[Parent, text, value], [],... []
* @ Param [Optional] Is onchange
*/
Function setupcascadeselect (cascadeselect, parent, nodes, isonchange ){
If (isonchange = NULL ){
Isonchange = false;
}
Cascadeselect. onchange = function (){
Setupcascadeselect (this, this. Options [This. selectedindex]. Value, nodes, true );
};
Cascadeselect. getattr = function (attrname ){
Return this [attrname]? This [attrname]: This. getattribute (attrname );
};
Cascadeselect. getelementbyid = function (ID ){
Return this. Form. elements [ID]? This. Form. elements [ID]: Document. getelementbyid (ID );
};
Cascadeselect. setdisplaystyle = function (value ){
If (! This. Multiple ){
This. style. Display = value;
}
VaR subelement = This. getelementbyid (this. getattr ("subelement "));
If (subelement! = Undefined ){
Subelement. setdisplaystyle = This. setdisplaystyle;
}
};
Nodes. getchildnodesbyparent = function (parent ){
VaR childnodes = new array ();
If (parent + "" = ""){
Return childnodes;
}
For (VAR I = 0; I <nodes. length; I ++ ){
If (nodes [I] [0]! = Undefined & nodes [I] [0] = parent ){
Childnodes [childnodes. Length] = nodes [I];
}
}
Return childnodes;
}

If (! Isonchange ){
Cascadeselect. Options. Length = 0;
VaR defaulttext = cascadeselect. getattr ("defaulttext ");
VaR defaultvalue = cascadeselect. getattr ("defaultvalue ");
VaR selectedvalue = cascadeselect. getattr ("selectedvalue ");

If (defaulttext! = Undefined & defaultvalue! = Undefined ){
Cascadeselect. Options [cascadeselect. Options. Length] = New Option (defaulttext, defaultvalue );
}
VaR childnodes = nodes. getchildnodesbyparent (parent );
For (VAR I = 0; I <childnodes. length; I ++ ){
Cascadeselect. Options [cascadeselect. Options. Length] = New Option (childnodes [I] [1], childnodes [I] [2]);
If (selectedvalue! = Undefined & selectedvalue = childnodes [I] [2]) {
Cascadeselect. selectedindex = cascadeselect. Options. Length-1;
}
}
}

If (cascadeselect. Options. length> 0 ){
Cascadeselect. setdisplaystyle ("");
VaR subelement = cascadeselect. getelementbyid (cascadeselect. getattr ("subelement "));
If (subelement! = Undefined ){
Setupcascadeselect (subelement, cascadeselect. Options [cascadeselect. selectedindex]. Value, nodes, false );
}
} Else {
Cascadeselect. setdisplaystyle ("NONE ");
}
}

/**
* Implement linkage using the Class Method
*/
Function cascadeselect (element, parent, nodes ){
This. form = element. form;
This. nodes = nodes;
This. Attributes = {
"Subelement": "subelement ",
"Defaulttext": "defaulttext ",
"Defaultvalue": "defaultvalue ",
"Selectedvalue": "selectedvalue"
}
This. Build (element, parent, false );
}

Cascadeselect. Prototype. getelementbyid = function (ID ){
Return this. Form. elements [ID]? This. Form. elements [ID]: Document. getelementbyid (ID );
};

Cascadeselect. Prototype. getattribute = function (element, attrname ){
Return element [attrname]? Element [attrname]: element. getattribute (attrname );
};

Cascadeselect. Prototype. getchildnodesbyparent = function (parent ){
VaR childnodes = new array ();
If (parent + "" = ""){
Return childnodes;
}
For (VAR I = 0; I <this. nodes. length; I ++ ){
If (this. nodes [I] [0]! = Undefined & this. nodes [I] [0] = parent ){
Childnodes [childnodes. Length] = This. nodes [I];
}
}
Return childnodes;
}

Cascadeselect. Prototype. setdisplaystyle = function (element, value ){
VaR cs = this;
If (! Element. Multiple ){
Element. style. Display = value;
}
VaR subelement = This. getelementbyid (this. getattribute (element, this. attributes ["subelement"]);
If (subelement! = Undefined ){
Subelement. setdisplaystyle = function () {CS. setdisplaystyle ;}
}
};

Cascadeselect. Prototype. Build = function (element, parent, isonchange ){
VaR cs = this;
Element. onchange = function (){
CS. Build (this, this. Options [This. selectedindex]. Value, true );
}
If (! Isonchange ){
Element. Options. Length = 0;
VaR defaulttext = This. getattribute (element, this. attributes ["defaulttext"]);
VaR defaultvalue = This. getattribute (element, this. attributes ["defaultvalue"]);
VaR selectedvalue = This. getattribute (element, this. attributes ["selectedvalue"]);
// Alert (selectedvalue );

If (defaulttext! = Undefined & defaultvalue! = Undefined ){
Element. Options [element. Options. Length] = New Option (defaulttext, defaultvalue );
}
VaR childnodes = This. getchildnodesbyparent (parent );
For (VAR I = 0; I <childnodes. length; I ++ ){
Element. Options [element. Options. Length] = New Option (childnodes [I] [1], childnodes [I] [2]);
// Alert ("childnodes [I] [2]:" + childnodes [I] [2]);
If (selectedvalue! = Undefined & selectedvalue = childnodes [I] [2]) {
Alert (selectedvalue );
Element. selectedindex = element. Options. Length-1;
}
}
}

If (element. Options. length> 0 ){
This. setdisplaystyle (element ,"");
VaR subelement = This. getelementbyid (this. getattribute (element, this. attributes ["subelement"]);
If (subelement! = Undefined ){
This. Build (subelement, element. Options [element. selectedindex]. Value, false );
}
} Else {
This. setdisplaystyle (element, "NONE ");
}
}
// -->

Ii. Demo instructions

Demo_cs2.htm

<HTML>
<Body>
<Script language = "JavaScript" type = "text/JavaScript" src = "CS. js"> </SCRIPT>
<Script language = "JavaScript" type = "text/JavaScript">
<! --
/*
Generate the linkage menu array, which can be generated from the database, in the form of [[Parent, text, value], [Parent, text, value]
Optimization:
1. Use Data to directly reduce the characters generated, and the data structure is simple.
Ii. Use numbers as much as possible for parent and value, and use single quotation marks as much as possible for value to reduce the size of generated data.
*/
VaR arycerttype = [
[0, 'foreign language certificates', 671],
[71, 'cet-4, 672],
[71, 'cet6, 673],
[71, 'cambridge Business English certificates', 674],
[71, 'English major 4', 675],
[71, 'cet 6, 676],
[71, 'English major 8', 677],
[71, 'toefl ', 678],
[71, 'International English proficiency test', 679],
[671, 'intermediate interpreter certificate', 680],
[671, 'advanced interpretation certificate', 681],
[671, 'Japanese Level 1 certificate', 682],
[671, 'Japanese Level 2 certificate', 683],
[671, 'Japanese Level 3 certificate', 684],
[671, 'Japanese Level 4 certificate', 685],
[671, 'Russian Level 4 certificate', 686],
[671, 'Certificate 6 in Russian ', 687],
[671, 'four-level French certificate', 688],
[671, 'Certificate 6, 689],
[671, 'German Level 4 certificate', 690],
[671, 'German cet6 certificate', 691],
[671, 'G', 692],
[671, 'gmat ', 693],
[671, 'fce ', 694],
[671, 'National Public English level example', 695],
[0, 'computer certificates', 696],
[696, 'national Computer Application Technology certificate', 697],
[696, 'national computer software technology qualification and level example', 698],
[696, 'Junior programmer ', 699],
[696, 'programmer ', 700],
[696, 'Senior programmer ', 701],
[696, 'System analyst ', 702],
[696, 'national Computer Level 1 ', 703],
[696, 'national Computer Level 2 ', 704],
[696, 'national Computer Level 3 A', 705],
[696, 'national Computer Level 4 ', 706],
[696, 'Microsoft certified experts', 707],
[696, 'Microsoft certified system engineer', 708],
[696, 'Microsoft certified system developer', 709],
[696, 'cisco Certified Network Planning and network support engineer', 710],
[696, 'cisco Certified Network Expert ', 711],
[696, 'novell authorized network manager', 712],
[696, 'novell authorized network engineer', 713],
[696, 'novell authorized senior Network Engineer ', 714],
[696, 'novell authorized Internet experts', 715],
[696, 'intel certified solution consulting expert ', 716],
[696, 'Sun certified Java programmer ', 717],
[696, '3com Certified Network Master', 718],
[696, 'adobe certified experts', 719],
[696, 'Lotus Certified Application developer', 720],
[696, 'Lotus certified system Manager', 721],
[696, 'sybase certification test', 722],
[696, 'cisco Certified Network Support engineer', 723],
[696, 'cisco certified Senior Network Support engineer', 724],
[696, 'cisco Certified Network Design engineer', 725],
[696, 'cisco certified Senior Network Design engineer', 726],
[696, 'computer beginner ', 727],
[696, 'computer Center', 728],
[696, 'network primary certificate', 729],
[696, 'national Computer Level 3 B ', 730],
[0, 'accounting certificates', 731],
[731, 'cpa ', 732],
[731, 'accounting Employment Permit ', 733],
[731, 'assistant accountant ', 734],
[731, 'intermediate accountant ', 735],
[731, 'Senior accountant ', 736],
[731, 'accounting computerization certificate', 737],
[731, 'International financial accounting certificate', 738],
[0, 'Certificate of professional authorization', 739],
[739, 'Junior engineer', 740],
[739, 'intermediate engineer', 741],
[739, 'Senior engineer', 742],
[739, 'assistant engineer', 743],
[739, 'Junior economist ', 744],
[739, 'intermediate economist ', 745],
[739, 'Senior economist ', 746],
[1, 740, 'assistant economist ', 747]
]

/*
When the document is loaded, the custom attributes are loaded to the control.
Subelement: Optional. Specifies a child object, which must be an HTML Select Control
Selectedvalue: Optional. Specifies the selected value, which is very convenient for display back.
Defaulttext: Optional. Default text
Defaultvalue: Optional. Default Value
Benefits of optimization:
1. Concentrate on scripts for convenient management
2. prevent some editors from reporting warnings that this attribute is not supported by the annoying XX Standard
3. Make the webpage pass standard verification
*/
Window. onload = function (){
Form = Document. Forms [0];
Form. certtype. setattribute ("subelement", "certname ");
// Form. certtype. setattribute ("selectedvalue", 739 );
Form. certtype. setattribute ("defaulttext", "unlimited level 1 ");
Form. certtype. setattribute ("defaultvalue ","");

Form. certname. setattribute ("maid", 746 );
Form. certname. setattribute ("defaulttext", "Unlimited 2 ");
Form. certname. setattribute ("defaultvalue ","");

/*
Call
Benefits After optimization:
1. As long as one method is used, it is easy to call and highly reusable.
2. optimized algorithms and fast execution
*/
// Setupcascadeselect (Form. certtype, 0, arycerttype, false );
New cascadeselect (Form. certtype, 0, arycerttype );
}
-->
</SCRIPT>
<Form name = "form1" method = "Post" Action = "">
<Select name = "certtype">
</SELECT>
<Select name = "certname" onchange = "alert ('xx');">
</SELECT>
</Form>
<Div id = "times"> </div>
</Body>
</Html>

Iii. Deficiencies

1. The onchange event is redefined. If you want to execute other things in onchage, find a solution. :)

2. Echo Upon modification

New DEMO code: four-level interaction demo

4. added an Online Demo)

 

 

 

 

Http://blog.csdn.net/KimSoft/archive/2006/06/14/796430.aspx