〓 Introduction
Abstract: For the design of the drop-down menu in the web project, in particular, the complex multi-dimensional menu is involved, and the entrance of many web development often does not know what to do, the discussion of this problem in the network is also uncommon. The article is designed to help beginners master the principles and methods of the multi-dimensional dynamic drop menu in the web project to help beginners, help the entry of JavaScript, DHTML, ASP, etc. to find a dynamic drop-down menu. solution.
〓 body 〓
Forehead
The author recently developed a large ASP project development, where many times encountered a multidimensional drop-down menu (for web projects, the data in the "
Multidimensional drop-down menu, as the name suggests, that is, according to the selection of a drop-down menu, controls the data displayed in the other one or more drop-down menu. For example, in a web management system, the user requests by selecting the unit name, and then selects the department name, and finally select the employee. That is, three drop-down lists are required, and the association is required between each drop-down list. By the first one can select the second, and simultaneously select the third, fourth, and the like. Then how the display data of each drop-down list is established, and how the associated data is driven by event drivers, which is the main content you want to discuss this article.
Friends who are familiar with VB, Delphi and other RAD development tools may feel puzzled. Indeed, in these so-called RAD development tools, we can use the Combo Boxes control to make a drop-down menu, thereby implementing the association between them. However, because the drop-down menu in the Web project is implemented using the
Regarding JavaScript, it is not the focus of this article, so you don't understand or don't be familiar with JavaScript readers, please refer to JavaScript information to obtain relevant information.
Ok, the words come forward, let's take a look at the design problem of multidimensional drop-down menus. For the convenience of discussions, we take the three-dimensional drop-down menu mentioned in the above as an example, tell you a step in step by step.
First, the operation process of analyzing menus
First, the user selects a list of units and selects a unit name, we assume that unit A. At this time, what should the other two drop-down lists? For the second drop-down menu, we hope that the second drop-down menu will immediately reflect the selection of the first drop-down menu, display only all departments in the unit A, and we have set the first item in the menu as department A (default display item). Then there may be readers asked, the third drop-down menu should not choose employee data corresponding to the department A at the same time? This is a good idea, yes, we should also change the data in the third drop-down menu as a list of employees in the department A. Similarly, when the user selects a department, the employee list will change the list. And so on.
The above is a kind of idea, there may be some special situations, for example, when changing the list of sectors, do not want to choose a department immediately, but display a prompt entry for "Please select". The idea is already there, the following is how to implement it.
Second, the vessel of menu data
According to the conventional idea, when the user selects the unit name from the first drop-down menu, we can select the department data related to it from the database, and display it, it seems that it doesn't matter. But experienced developers will find that the web page must be refreshed again when you connect the database again. This is a headache problem. On the one hand, we want to connect to the database, but we must keep the user's input data is not destroyed. Even so, it is estimated that users don't want to see a situation that is refreshed every time you choose. Is there a better way?
Yes, that is, using JavaScript's multi-dimensional array. Why can't we take the data you need to display in the first connection database, put it in an array? In this way, when you change the menu data, will it improve the efficiency of the data from the array? This is an exciting way. This method mentioned in the JavaScript array, we call the container for menu data.
Is your idea to suddenly be clear? But after the jump is trying, is it not so simple? The problem is coming, how is the structure of the container design, how is the association between data? Don't worry, in fact, this is the problem.
Third, the design of the data container structure
Speaking of the design of the container structure, we have to thank the linked list in the data structure to our revelation - the linked list is connected by the pointer. Although there is no pointer in JavaScript, why should we simulate it.
In order to discuss, 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 form: (EMP_ID, DEPT_ID, EMP_NAME, ...)
With this database structure, we can easily derive the structure of the array. You are right, this should be a multi-dimensional array. Its definition method should be like this (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);
n The size of the actual data is determined, for example, in the unit drop-down menu, n represents the total number of units. However, the reader must understand that it is due to the uncertainty of n, the above code must be generated by the process. For example, for ASP programs, we can embed such a code between
