Write the JavaScript code, the display of the control menu

Fourth, write the JavaScript code, the display of the control menu

In fact, there is experienced programmer, you should know how to do it. But you may wish to read, maybe, the author's method is not necessarily a new attempt. Moreover, according to me guess, most of the people who read my article is the programmer who has no experience, huh, homes to help people. Come on, let's go. Let the menu appear, there are several ideas. By using the ASP and other programs directly generate the structure, use the ADD and REMOVE methods of the Option object to dynamically add and change, etc., are methods that can be used. However, after many practice and exploration of the author, there is a way more effective, that is, using the Script code dynamic rewrite the entire framework.

Ok, let's start from the load page (Document), step by step, the JavaScript code is how to control the display of the menu.

Since there are three menus, then we have to design such an HTML code in advance (it doesn't matter if it doesn't matter, it is just for your convenience):

You may ask, what data is there? Don't be strange, wait for you to understand. Let's take a look at the ONLOAD event of the object body_onload ()?

Let's study it. First, the program uses the getParent () function to get the container TD object handle of S0, then use the MAKMENU () function to generate the menu code, assign the code to the TD object just obtained; then S1, then S2 .. The getParent () function is defined as follows: Function getParent (src, tag) {if (src && src.tagname! = Tag) {return (getParent (src.parentelement, tag));} Return Src;} The TAG parameter here must be capitalized For example, TD, TR, TABLE, the function returned to the parent object defined by the Tag tag specified by the SRC. We must specifically explain the MakeMenu () function. This function is self-evident - generating the HTML definition of the menu, first look at the function definition:

Code Copy frame Function Makemenu (Arrsub, PValue, Cvalue, Name, BULSKIP) {

Var Shtml = "

IF (BULSKIP) SHTML = "

";

For (var i = 0; i

IF (Arrsub [I] [0] == PVALUE) {

Var tag = (arrsub [i] [1] == CVALUE)? "SELECTED>:"> ";

SHTML = "

";

}

}

SHTML = ""; RETURN SHTML;

} [Ctrl A All Choose and Copy]

Let's take a look at the meaning of the parameters. Arrsub, refers to the source of menu data, is actually the array defined above; PVALUE, specify the number of the parent node, according to this number, we can find all the sub-node data; CVALUE, the default display of the specified menu Item; Name, specify the name of the

menu; BULSKIP, the default display item for the specified menu is "" or specific data.

The purpose of the GetSelectValue () function is to get the value of the object. If no value is displayed, the function returns 0.

Then, when the user loads the page, the first run is the body_onload () function, which uses the MakeMenu () function dynamically generated the HTML code based on the generated JavaScript multi-dimensional array, and loads into the page according to the principle of DHTML. OK, run the page, see if the menu is displayed normally? If there is any problem, the hurry time should be commissioned. For example, if the database is connected is normal, whether the case in the JavaScript code is correct, whether the array is defined whether there is any problem ...

Next, select the menu ... Wait a minute, it seems to have any omissions, yes, we must also add program code for the

Object of Object:

Ok, let's check it again, and there is any omissions. Select the unit from the first drop-down menu, immediately, the second drop-down menu and the third drop-down menu have changed to see if it is. (Not? Oh, look back "; select the department in the second drop-down menu to see if the staff's drop-down menu changes? Congratulations, you have successfully realized a three-dimensional pull-down menu. In fact, for the two-dimensional menu, the implementation method is exactly the same. The reader can use the method of this article to implement the full Raiders of the web project menu. I will encounter similar problems in the future. I think this time you will definitely say anything, let me get it.

Function setSubmenu (pselect) {

Var OOPTION, SVALUE;

IF (Pselect.SelectedIndex <0) Return;

Switch (pselect.name) {

Case "S0":

VAR TD = GetParent (Document.all ("S1"), "TD");

Td.innerhtml = MakeMenu (ArrDept, GetSelectValue ("S0"), "0", "S1", 0);

TD = getParent (Document.all ("S2"), "TD");

Td.innerhtml = MakeMenu (Arremp, GetSelectValue ("S1"), "0", "S2", 0);

Break;

Case "S1":

VAR TD = getParent (Document.all ("S2"), "TD");

Td.innerhtml = MakeMenu (Arremp, GetSelectValue ("S1"), "0", "S2", 0); Break;

DEFAULT:

}

}

Function getSelectValue (Oselect) {

IF (Oselect.SelectedIndex <0) returnograph;

Return Oselect.Options (Oselect.selectedIndex) .value;

}

Function Makemenu (Arrsub, PValue, Cvalue, Name, BULSKIP) {

Var Shtml = "

IF (BULSKIP) SHTML = "

";

For (var i = 0; i

IF (Arrsub [I] [0] == PVALUE) {

Var tag = (arrsub [i] [1] == CVALUE)? "SELECTED>:"> ";

SHTML = "

";

}

}

SHTML = "";

Return SHTML;

}

Function body_onload () {

VAR TD = getParent (Document.all ("S0"), "TD");

Td.innerhtml = MakeMenu (Arrunit, 0, 0, "S0", 1);

TD = getParent (Document.all ("S1"), "TD");

Td.innerHtml = MakeMenu (Arrdept, GetSelectValue (Document.all ("S0"), 0, "S1", 1);

TD = getParent (Document.all ("S2"), "TD");

Td.innerhtml = MakeMenu (Arremp, GetSelectValue (Document.all ("S1"), 0, "S2", 1);

}

...

转载请注明原文地址:https://www.9cbs.com/read-131219.html

---

9cbs

New Post(0)