Implementation method of Web association menu

web| Menu

The author has been involved in the development of a large ASP project, which many times to encounter a multidimensional Pull-down menu (for Web projects, here refers to the <SELECT> elements in the page), the data in the menu need to be removed from the database, and dynamic generation and change. The author has previously published how to use PHP and JavaScript to make two-dimensional pull-down menu articles, the current article on the network is also quite a lot of ideas, there are many innovations, but for this article in the Multidimensional Pull-down menu, few people talk about. I do not intend to swim, just want to develop a little experience and skills summed up, hoping to give the general reader a little enlightenment.

A multidimensional Drop-down menu, as the name suggests, controls the data displayed in one or more drop-down menus, depending on the selection of a Drop-down menu. For example, in a Web management system, the user asks to select the name of the unit by selecting the name of the organization, and then select the employee. That is, you need to provide three drop-down lists, and you need to establish an association between each drop-down list. Through the first one can select the second, and simultaneously select the third, fourth, and so on. So how to correlate the display data of each Drop-down list and how the associated data is driven by events is the main content of this article.

Familiar with VB, Delphi and other RAD development tools friends may feel puzzled. Indeed, in these so-called RAD development tools, we can make use of the combo boxes control to implement the Pull-down menu easily, and then realize their relationship. However, because the Drop-down menus in the Web project are implemented using the <SELECT> elements in HTML, they are far less powerful than the RAD tools because of the limitations of HTML, whether the object's properties or the event model. So, to develop a Web project, there's only one solution to this problem, which is using JavaScript (and some might say that Java can be used to do it, so I'll just say you're a master).
The use of JavaScript is not the focus of this article, so readers who don't know or are unfamiliar with JavaScript should refer to JavaScript for information.

OK, let's get back to the bottom, we'll discuss the design of the multidimensional Pull-down menu together. For the sake of discussion, we take the three-dimensional Pull-down menu mentioned above as an example to explain the design idea step-by-step.

Analysis of the operation process of the menu

First, the user selects the list of units and selects a unit name from which we assume the unit A. What should the other two drop-down lists do? Yes, we want the second Drop-down menu to immediately reflect the selection of the first Drop-down menu, display and display only all departments in unit A, and then assume that the first item in the menu is department a (the default display item). Then perhaps a reader will ask, should the third Pull-down menu not select the employee data corresponding to department a at the same time? It's a good idea, yes, and we should change the data in the third Drop-down menu as a list of employees in department a. Similarly, when a user selects a department, the employee list is changed. by analogy.
The above is a kind of thinking, there may be some special circumstances, for example, when changing the department list, do not want to select a department immediately, but to display a "Please select" Word of the prompt entry.
The idea is already there, the following is how to achieve the problem.

　　Second, the container of the menu data

According to the general idea, when the user selects the unit name from the first Drop-down menu, we can select the relevant department data from the database and display it, which seems to be feasible. But experienced developers will find that, because of the stateless nature of Web pages, when you connect to the database again, the Web page must be refreshed again. This is a headache, on the one hand we want to connect to the database, but on the other hand we have to keep the user has entered the data is not corrupted. Even so, it is estimated that users do not want to see a situation where each option is refreshed once. Isn't there a better way?

Yes, that's a multidimensional array that uses JavaScript. Why can't we take all the data we need to display in the first time we connect to the database and put it in the array? So every time you change the menu data, as long as the data from the array, can not greatly improve the efficiency of it? This is an exciting method, the JavaScript array mentioned in this method, which we call the container for the menu data.

Your train of thought is not suddenly suddenly enlightened? But after a while, do you feel like things aren't that simple? The problem again, how to design the structure of the container, how to achieve the relationship between the data? Don't worry, this is the problem.

　　Iii. design of data container structure

Speaking of container structure design, we have to thank the data structure of the linked list to our inspiration-linked lists are linked through the pointer. Although there is no concept of pointers in JavaScript, why can't we simulate them?

For ease of discussion, we assume that the structure of the database is as follows:

1, Unit Information table: (unit_id, Unit_name, ...)
2, Department Information table: (dept_id, unit_id, Dept_name, ...)
3, Employee Information table: (emp_id, dept_id, Emp_name, ...)

Using this database structure, we can easily deduce the structure of the array. You're right, this should be a multidimensional array. The method should be defined as follows (take the department as an example):

var arrdept = new Array ();
Arrdept[0] = new Array (unit_id0, dept_id0 DEPT_NAME0);
ARRDEPT[1] = new Array (UNIT_ID1, DEPT_ID1, dept_name1);
...
Arrdept[n] = new Array (unit_idn, DEPT_IDN, dept_namen);

The size of n depends on the amount of actual data, for example, in the Unit Drop-down menu, n represents the total number of units. But the reader must understand that because of the uncertainty of N, the above code must be generated by program dynamics. For example, for an ASP program, we can embed such a piece of code between <script></script>:

<%
Dim RS, I
' [Connect the database, take out the data]
Response.Write "var arrdept = new Array ();" & vbNewLine
i = 0
While not Rs. Eof
Response.Write "arrdept[" & I & "] = new Array (' & RS (unit_id) &" ', ' "& _
RS (dept_id) & "', '" & RS (dept_name) & "');" & vbNewLine
Rs. MoveNext
i = i +1
Wend
...
%>

Code Copy Box

<%dim rs, i ' [Connect the database, take out the data]response.write "var arrdept = new Array ();" & vbnewlinei = 0while not Rs. Eofresponse.write "arrdept[" & I & "] = new Array (' & RS (unit_id) &" ', ' "& _rs (dept_id) &" ', ' "& RS (dept_name) &" '); "& vbnewliners.movenexti = i +1wend...%>

[Ctrl + a All select and copy]

This code is used to take the data out of the departmental table and produce an associated JavaScript multidimensional array. This is only a demonstration of the author, readers can use a more flexible method to extract data.

Anyway, let's go back to the structure definition of the JavaScript array. Smart readers should have found the array definition method from the above code, but I still have to take pains to add it again:

We define the first element of the array as a pointer to its parent node. Wait, what is a parent node? The parent node is clear. The first level of the node, for example, the department's upper level is the unit, the employee's upper level is the department. So what's the second element? Let's take a look at the following paragraph <SELECT> definition:

<select name= "S1" >
<option value= "1" > Unit 1</option>
<option value= "2" > Unit 2</option>
....
</SELECT>

Where does the value property of <OPTION> element come from? Yes, the second element, and so on, the third element refers to the data displayed in the menu, that is, "Unit 1" above, "Unit 2" ...

Readers here may be a little confused, say so much, what exactly is this array? Don't worry, let's take the department as an example, give a section of the array simulation code that is generated dynamically from the data in the Department library:

<script language= "JAVASCRIPT" >
<!-
...
var arrdept = new Array ();
Arrdept[0] = new Array (' u01 ', ' d01 ', ' department 1 ');
ARRDEPT[1] = new Array (' u01 ', ' d02 ', ' Department 2 ');
...
ARRDEPT[8] = new Array (' u06 ', ' d08 ', ' Department 8 ');
...
ARRDEPT[15] = new Array (' u08 ', ' D15 ', ' Department 15 ');
...
->
</SCRIPT>

The array finally came to the truth. The number of the representative unit of the data at the beginning of "U", that is, a pointer to the unit, that is, we can determine the department to which the unit belongs by using this number, and the data at the beginning of "D" represents the department number, which is used for pointers to the next level menu ( (Note: In actual use, the data format depends on the situation)
There is a problem, like the unit so there is no parent node of the array how to define? Simply put the first element of the array to 0.

Next, it's time for us to write JavaScript code to control the display of the menu. Let's assume that the three arrays you generated are named Arrunit,arrdept,arremp.

　　Write JavaScript code, control the display of the menu

In fact, experienced programmers, read here should know how to go on. But you may as well read on, perhaps, the author's approach to you may not be a new attempt. Moreover, according to my guess, read my article most are inexperienced programmers, hehe, help people to the end. Come on, let ' s go.

Let the menu show up, in fact, there are several ways of thinking. The use of ASP and other programs to directly generate <SELECT> structure, the use of Option objects Add and remove methods dynamically added and changed, and so on, are available methods. However, after the author's many practices and groping, there is a way to be more effective, that is, the use of script code dynamically rewrite the entire <SELECT> framework.

OK, let's start with the load page (document) to explain step-by-step how the JavaScript code actually controls the display of the menu.

Now that we have three menus, we have to design such HTML code in advance (it doesn't matter, just put it there for easy understanding):

<body bgcolor= "#FFFFFF" >
...
<TD>
<select name= "S0" ></SELECT>
</TD>
<TD>
<select name= "S1" ></SELECT>
</TD>
<TD>
<select name= "S2" ></SELECT>
</TD>
</BODY>

You might ask, how come there's no data here? Don't be surprised, you will naturally understand when you wait. Let's take a look at the onload event of the <BODY> object Body_onload () What is the job?

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);
}

Let's take a look at it. First, the program uses the GetParent () function to obtain the S0 container TD object handle, then uses the Makmenu () function to produce the menu code, and assigns the code to the TD object just obtained, then is S1, then is 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 argument here must be capitalized, such as TD, TR, TABLE, and the function returns the parent object defined by the tag tag that is closest to the element specified by SRC.

We're going to make a special note of the Makemenu () function, which is self-evident--produces the HTML definition of the menu, first look at the function definition:

function Makemenu (arrsub, Pvalue, Cvalue, name, Bulskip) {
var SHTML = "<select name= '" + name + "' >";
if (bulskip) SHTML + = "<option value=0>< not selected ></option>";
for (Var i=0 i < arrsub.length; i++) {
if (Arrsub[i][0]==pvalue) {
var tag = (arrsub[i][1]==cvalue)? "selected>": ">";
SHTML + + "<option value= '" + arrsub[i][1] + "' + tag + arrsub[i][2] +" </option> ";
}
}
SHTML = "</select>";
return SHTML;
}

Code Copy Box
function Makemenu (arrsub, Pvalue, Cvalue, name, Bulskip) {var SHTML = "<select name=" "+ Name +" ' > "; if (Bulskip) s HTML + = "<option value=0>< not selected ></option>" for (Var i=0 i < arrsub.length; i++) {if (arrsub[i][0]== pvalue) {var tag = (arrsub[i][1]==cvalue)? "selected>": ">"; SHTML + + <option value= ' "+ arrsub[i][1] +" "+ tag + ARRSUB[I][2] + "</option>";}} SHTML + = "</select>"; return SHTML}
[Ctrl + a All select and copy]

Take a look at the meaning of the parameters. Arrsub, refers to the source of the menu data, in fact, we defined the array above, pvalue, specify the number of parent node, according to this number, we can find all the child node data; cvalue, specify the default display item for the menu; name, specify the resulting <select The name of the > menu; bulskip Specifies whether the default display item for the menu is "< not selected >" or specific data.

The purpose of the Getselectvalue () function is to get the value currently displayed by the <SELECT> object. If no value is displayed, the function returns 0.

function Getselectvalue (oselect) {
if (Oselect.selectedindex < 0) return 0;
Return Oselect.options (Oselect.selectedindex). value;
}

Then, when the user loads the page, the first run is the Body_onload () function, which uses the Makemenu () function to dynamically generate the HTML code for the menu based on the JavaScript multidimensional array that has been generated, and loads it into the page based on the principles of DHTML. OK, run the page to see if the menu is displayed properly? If you have any problems, take the time to debug it properly, such as whether the connection to the database is normal, whether the JavaScript code is correct or not, and whether the array definition has any problems ...

Next, select the menu ... Wait a minute, like there's something missing, right, we also have to add program code for the onchange event for the <SELECT> object:

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
}
}

OK, let's check it out and see if there is anything missing. Select the unit from the first Drop-down menu, and immediately the second Drop-down menu and the third Drop-down menu have changed to see if you want to. Not Oh, look back and check it out, then select the department in the second Drop-down menu to see if the employee's Pull-down menu changes.

Congratulations, you have successfully implemented the three-dimensional pull-down menu. In fact, for two-dimensional menus, the implementation of the method is exactly the same. Readers can fully use this method to implement the Web Project menu of the full strategy. Later encountered similar problems, I think this time you can certainly not hesitate to say, let me take care of it.