The unlimited Association drop-down box of select can be specified [original]

I mentioned the General infinite linkage drop-down box above. But what if you want to specify select? This requires the following linkage drop-down box class.
Because select needs to be specified, the previous container is not needed. We use an array to save the specified select. In addition, the structure of the data used is slightly changed, and there are multiple depth items, each item in an unlimited category must have a depth.
The data used by sortarr. JS is as follows:
VaR arrsorts = new array (35 );
Arrsorts [0] = ["1", "Main Category 1", "0", "1"];
Arrsorts [1] = ["2", "Main Category 2", "0", "1"];
Arrsorts [2] = ["3", "Main Category 3", "0", "1"];
Arrsorts [3] = ["4", "Category 1", "1", "2"];
Arrsorts [4] = ["5", "Class 2", "1", "2"];
Arrsorts [5] = ["6", "Category 3", "1", "2"];
Arrsorts [6] = ["7", "Category 1", "4", "3"];
Arrsorts [7] = ["8", "Category 2", "4", "3"];
Arrsorts [8] = ["9", "Category 3", "4", "3"];
Arrsorts [9] = ["10", "Category 4", "2", "2"];
Arrsorts [10] = ["11", "Category 5", "2", "2"];
Arrsorts [11] = ["12", "Category 6", "2", "2"];
Arrsorts [12] = ["13", "Category 4", "5", "3"];
Arrsorts [13] = ["14", "Category 5", "5", "3"];
Arrsorts [14] = ["15", "Last Class 1", "7", "4"];
Arrsorts [15] = ["16", "Last Class 2", "7", "4"];
Arrsorts [16] = ["17", "last class 3", "7", "4"];
Arrsorts [17] = ["18", "ultimate Class 1", "15", "5"];
Arrsorts [18] = ["19", "ultimate Class 2", "15", "5"];
Arrsorts [19] = ["20", "ultimate class 3", "15", "5"];
Arrsorts [20] = ["21", "ultimate class 4", "16", "5"];
Arrsorts [21] = ["22", "ultimate Category 5", "16", "5"];
Arrsorts [22] = ["23", "ultimate 6", "16", "5"];
Arrsorts [23] = ["24", "last class 4", "8", "4"];
Arrsorts [24] = ["25", "last category 5", "8", "4"];
Arrsorts [25] = ["26", "last class 6", "8", "4"];
Arrsorts [26] = ["27", "Last Class 7", "9", "4"];
Arrsorts [27] = ["28", "last class 8", "9", "4"];
Arrsorts [28] = ["29", "last class 9", "9", "4"];
Arrsorts [29] = ["30", "ultimate 7", "17", "5"];
Arrsorts [30] = ["31", "ultimate class 8", "17", "5"];
Arrsorts [31] = ["32", "ultimate Category 9", "17", "5"];
Arrsorts [32] = ["33", "ultimate class 10", "24", "5"];
Arrsorts [33] = ["34", "ultimate 11", "24", "5"];
Arrsorts [34] = ["35", "ultimate 12", "24", "5"];
Arrsorts [35] = ["36", "ultimate class 13", "24", "5"];
Select is stored as an array, which is selectarr. JS:
VaR selectarr = new array ();
Selectarr. Push ("test1 ");
Selectarr. Push ("Test2 ");
Selectarr. Push ("test3 ");
Selectarr. Push ("test4 ");
Selectarr. Push ("test5 ");
VaR selectarr2 = new array ();
Selectarr2.push ("test6 ");
Selectarr2.push ("test7 ");
Selectarr2.push ("test8 ");
Selectarr2.push ("test9 ");
// Selectarr2.push ("test10 ");
Then, sort. JS is the main link processing class:
/**
* Menu classes selected for unlimited levels of Association
* _ Storevalueobjname: name of the page element that stores the selected item Value
* _ Showselectobjname: displays the name of the page element of the menu.
* _ Sortarr: display the array required by the menu. The format is as follows:
* Arrsorts [0] = ["category id1", "Category 1", "parent category id1", "depth 1"];
* Arrsorts [1] = ["category Id2", "Category 2", "parent category Id2", "depth 2"];
*
* @ Author zxub 2005-8-23
*/
Function sortmenu (_ storevalueobjname, _ sortarr, _ selectarr)
{
This. storevalueobj = Document. getelementbyid (_ storevalueobjname );
This. sortarr = _ sortarr;
This. selectarr = _ selectarr;
This. maxdepth = _ selectarr. length;

/**
* Obtain the first category and display it in showselectobj.
* _ Sortmenuobj: Instance Object of sortmenu, pointing to itself
*/
This. initsorts = function (_ sortmenuobj)
{
For (I = 1; I <this. maxdepth; I ++)
{
Document. getelementbyid (this. selectarr [I]). style. Display = "NONE ";
}
This. storevalueobj. value = 0;
_ Select = Document. getelementbyid (this. selectarr [0]);
_ Select. sortmenuobj = _ sortmenuobj;
_ Select. onchange = function ()
{
This. sortmenuobj. setsorts (this, this. sortmenuobj );
}
_ Select. Add (New Option ("Select ...",""));
For (VAR I = 0; I <this. sortarr. length; I ++)
{
If (this. sortarr [I] [2] = 0)
{
_ Select. Add (New Option (this. sortarr [I] [1], this. sortarr [I] [0]);
}
}
_ Select. Depth = 1;
}

This. getselectindex = function (_ selectname)
{
_ Index = NULL;
For (I = 0; I <this. maxdepth; I ++)
{
If (this. selectarr [I] = _ selectname)
{
_ Index = I;
Break;
}
}
Return _ index;
}

/**
* Pull-down box Interaction
* _ Curselect: Current selected drop-down box
* _ Sortmenuobj: Instance Object of sortmenu, pointing to itself
*/
This. setsorts = function (_ curselect, _ sortmenuobj)
{
// If there is a drop-down box behind the current drop-down box or a lower-level drop-down box, the lower-level drop-down box is cleared and the lower-level part is regenerated later
For (I = _ curselect. depth; I <this. maxdepth; I ++)
{
_ Select = Document. getelementbyid (this. selectarr [I]);
While (_ select. length> 0)
_ Select. Remove (0 );
_ Select. style. Display = "NONE ";
}
// Obtain the value of the current option
_ Ivalue = _ curselect. Options [_ curselect. selectedindex]. value;
// If you select the first item in the drop-down box (the value of the first item is "")
If (_ ivalue = "")
{
// If the upper-level drop-down list exists
If (_ curselect. Depth> 1)
{
_ Parent = Document. getelementbyid (this. selectarr [_ curselect. Depth-2]);
// The value is selected from the upper-level drop-down list.
This. storevalueobj. value = _ parent. Options [_ parent. selectedindex]. value;
}
Else
{
// If there is no upper-level, the value is 0.
This. storevalueobj. value = 0;
}
// Select the first item (Please Select...), there is no lower-level option, so return
Return false;
}
// The selected item is not the first item
This. storevalueobj. value = _ ivalue;
If (_ curselect. Depth = _ sortmenuobj. maxdepth)
{
Return false;
}
// Remove the original selection status from the current drop-down list
// Change the code corresponding to the selected option to selected
For (I = 0; I <_ curselect. Options. length; I ++)
{
If (_ curselect. Options [I]. Selected = "selected ")
{
_ Curselect. Options [I]. removeattribute ("selected ");
}
If (_ curselect. Options [I]. value = _ ivalue)
{
_ Curselect. Options [I]. Selected = "selected ";
}
}
// New sublevel drop-down list
_ Haschild = false;
For (VAR I = 0; I <this. sortarr. length; I ++)
{
If (this. sortarr [I] [2] = _ ivalue)
{
If (_ haschild = false)
{
_ Siblingselect = Document. getelementbyid (this. selectarr [_ curselect. Depth]);
_ Siblingselect. sortmenuobj = _ sortmenuobj;
_ Siblingselect. style. Display = "";
_ Siblingselect. Depth = parseint (_ curselect. Depth) + 1;
_ Siblingselect. onchange = function ()
{
This. sortmenuobj. setsorts (this, this. sortmenuobj );
}
_ Siblingselect. Add (New Option ("Select ...",""));
_ Siblingselect. Add (New Option (this. sortarr [I] [1], this. sortarr [I] [0]);
_ Haschild = true;
}
Else
{
_ Siblingselect. Add (New Option (this. sortarr [I] [1], this. sortarr [I] [0]);
}
}
}
}

/**
* Generate the entire linkage menu based on the minimum class selection value, and recursively complete the subsequent steps
* _ Mincatavalue: value of the smallest class
* _ Sortmenuobj: Instance Object of sortmenu, pointing to itself
*/
This. hidechildinnewinit = false;
This. newinit = function (_ mincatavalue, _ sortmenuobj)
{
If (this. storevalueobj. value = "undefined" | this. storevalueobj. value = "")
{
This. storevalueobj. value = _ mincatavalue;
}
If (_ mincatavalue = 0)
{
// Mincatavalue is 0, that is, it is initialized.
This. initsorts (_ sortmenuobj );
// Exit the function after initialization.
Return false;
}
// Parent ID
_ Parentid = NULL;
_ Depth = NULL;
For (VAR I = 0; I <this. sortarr. length; I ++)
{
If (_ mincatavalue = This. sortarr [I] [0])
{
_ Depth = This. sortarr [I] [3];
_ Parentid = This. sortarr [I] [2];
Break;
}
}
If (! This. hidechildinnewinit)
{
For (I = _ depth; I <this. maxdepth; I ++)
{
Document. getelementbyid (this. selectarr [I]). style. Display = "NONE ";
}
This. hidechildinnewinit = true;
}
If (_ depth> This. maxdepth)
{
Alert (the "drop-down box can only constitute a" + this. maxdepth + "level link, and the current value is in the" + _ depth + "level link! ");
Alert ("the initialization drop-down box is in the original state ");
This. initsorts (_ sortmenuobj );
Return false;
}
_ Select = Document. getelementbyid (this. selectarr [_ depth-1]);
_ Select. Depth = _ depth;
_ Select. sortmenuobj = _ sortmenuobj;
_ Select. onchange = function ()
{
This. sortmenuobj. setsorts (this, this. sortmenuobj );
}
_ Select. Add (New Option ("Select ...",""));

For (VAR I = 0; I <this. sortarr. length; I ++)
{
If (this. sortarr [I] [2] = _ parentid)
{
If (this. sortarr [I] [0] = _ mincatavalue)
{
_ Opt = New Option (this. sortarr [I] [1], this. sortarr [I] [0]);
_ Select. Add (_ opt );
_ Opt. Selected = "selected ";
}
Else
{
_ Select. Add (New Option (this. sortarr [I] [1], this. sortarr [I] [0]);
}
}
}
If (_ parentid> 0)
{
This. newinit (_ parentid, _ sortmenuobj );
}
}
}
Test page test.htm:
<! Doctype HTML public "-// W3C // dtd html 4.0 transitional // en">
<HTML>
<Head>
<Title> new document </title>
<Meta name = "generator" content = "editplus">
<Meta name = "author" content = "">
<Meta name = "keywords" content = "">
<Meta name = "Description" content = "">
<Script language = "JavaScript" src = "sortarr. js"> </SCRIPT>
<Script language = "JavaScript" src = "selectarr. js"> </SCRIPT>
<Script language = "JavaScript" src = "sort. js"> </SCRIPT>
</Head>

<Body>
<Select name = test1> </SELECT>
<Select name = Test2> </SELECT>
<Select name = test3> </SELECT>
<Select name = test4> </SELECT>
<Select name = test5> </SELECT>
<Input id = testvalue name = testvalue> <br>
<Select name = test6> </SELECT>
<Select name = test7> </SELECT>
<Select name = test8> </SELECT>
<Select name = test9> </SELECT>
<! -- <Select name = test10> </SELECT> -->
<Input id = testvalue2 name = testvalue2>
<Script language = "JavaScript">
VaR A = new sortmenu ("testvalue", arrsorts, selectarr );
A. initsorts ();
VaR B = new sortmenu ("testvalue2", arrsorts, selectarr2 );
B. newinit (7, B );
</SCRIPT>
</Body>
</Html>
Now, the infinite Association drop-down box of select can be specified. This association can be edited by select later ~