JavaScript + PHP Application 1: Dynamic implementation of double drop-down menu in web production

In web pages, this is often encountered, and the dynamic generation sub drop menu is generated through the selection of the primary drop-down menu. For example, in the main menu, there is "focus news", "life fashion", "mood story" three options, through the "focus news" selection, submenu automatically generates "domestic", "international", "sports", "Entertainment" and so on.

With JavaScript, we can easily implement the above effects. But the problem is that if the options in the menu are dynamic extracted from the database (or other file), it is not easy to implement it. According to its own practical experience, I introduce you to the implementation of JavaScript PHP, and the database in the text uses mysql. In this example, the author will also introduce how to return to the selected state of the previous menu option after each form commit.

The role of PHP described in the article, one is to extract menu options from the database, another role is used to generate JavaScript code. Readers can use their familiar interpretation languages ​​such as ASP.

In order to simplify the code, the author assumes that the main menu has passed through the HTML configuration. Since the submenu needs to dynamically design, only the basic framework is plotted, and the HTML code is as follows:

// main menu design

Focus news

life fashion

mood story

// Value must be consistent with the following MENU array

// submenu design

What we need to consider is what the menu's onchange () event needs to complete. Its approach process is to construct the submenu item according to the options for the main menu. The item text of the submenu is best set in advance. According to this idea, the author adopted the joint array record submenu option in JavaScript and automatically generated by PHP when loading. Thus, the author designed the following JavaScript function setMenu ():

Function setmenu () {

Menu = array ("a", "b", "c"); // Construct MENU joint array

$ Db = new my_db ();

$ DB-> Database = "***"; // Construct a new MySQL connection, here is used in PHPLIB

$ mmenu = array ("a", "b", "c"); // Here the author simplified

For ($ I = 0; $ i

$ ID = $ mmenu [$ I];

$ Db-> query ("Select Menu from Class Where Menuid = '". $ ID. "'");

/ / Hypothesis menu option stores the MENU field in the class table, MENUID is used to identify menu

While ($ db-> next_record ()) {

$ SMENU [] = "/ """1,00u")."/" "

IF (Isset && Is_Array ($ SMENU)) {

$ Str = Implode (",", $ SMENU);

Echo "MENU [/" $ ID / "] = array ($ STR); / N / T / T";

/ / Complete the fill of the Menu joint array

Unset ($ SMENU); // Delete SMENU variables

}

}

?> // End PHP program

With (document) {

ID = all ("mmenu"). value; // Get the value value of the main menu

Arr_menu = menu [id];

For (i = all ("smenu"). Options.Length; i> = 0; i -) {

All ("SMENU"). Options.remove (i); // Need to clear the original item

}

IF (arr_menu.length == 0) {

Return;

}

For (i = 0; i

Obj = creteElement ("option");

Obj.text = arr_class [i];

All ("SMENU"). Options.add (obj);

}

}

}

This time, each display of the document, the PHP section will be interpreted as a JavaScript language, and when the master menu is clicked, the submenu will be automatically updated. In the same way, readers can create more complex multiple menu options based on this idea.

Finally, the author briefly introduces how to implement the last state of the menu item after the form is submitted. Tips are actually a lot, and the author uses implicit variables. Add the following code in the form:

We only need to assign each implicit variable in the onSubmit () event of the Form form. which is:

Document.all ("h1"). Value = Document.all ("mmenu"). SELECTEDINDEX;

Document.all ("h2"). Value = Document.all ("SMENU"). SELECTEDIndex;

In order to use implicit variables, in the Body OnLoad () event of the document, we use the PHP method (or other methods) to control the display:

IF (! isset ($ h1)) {// only need to judge $ h1

$ H1 = 0;

$ H2 = 0;

}

echo "Document.all (/" mmenu / "). SELECTEDINDEX =". $ H1. "; / n / t / t";

echo "Document.all (/" mmenu / "). Click (); / n / t / t";

echo "Document.all (/" mmenu / "). SELECTEDINDEX =". $ H1. "; / n / t / t";

echo "Document.all (/" SMENU / "). SELECTEDINDEX =". $ H2;?>

At this point, we have realized the dynamic implementation of the dual drop menu.