JavaScript is used in combination with PHP to achieve dynamic implementation of the double drop-down menu in the production of web pages, and javascript web pages

JavaScript is used in combination with PHP to achieve dynamic implementation of the double drop-down menu in the production of web pages, and javascript web pages

This article describes the dynamic implementation code of the double drop-down menu. For example, the main menu contains three options: "Focus News", "lifestyle", and "mood Story, through the selection of "Focus News", sub-menus are automatically generated, such as "domestic", "international", "Sports", and "Entertainment", and so on.

With javascript, we can easily achieve the above results. But the problem is that if the options in the menu are dynamically extracted from the database (or other files), it is not easy to implement them. Based on my actual experience, I would like to introduce you to the implementation method using javascript + php. The database in this article uses mysql. In this example, the author also describes how to return the selection status of the last menu option after each form is submitted.

The role of php introduced in this article is to extract menu options from the database and generate javascript code. Readers can use familiar explanatory languages, such as asp.

To simplify the code, assume that the main menu has been constructed through html. As the sub-menu needs to be dynamically designed, only the basic framework is drawn. The html code is as follows:

<Select name = "mmenu" onchange = "java script: setmenu () "> // Main Menu Design <option value =" a "> Focus News </option> <option value =" B "> lifestyle </option> <option value =" c "> mood story </option> // value must be consistent with the menu array below </select> <select name =" smenu "> // sub-menu Design </select>

We need to consider the steps required for the onchange () event of the menu. The general process is to construct a sub-menu item based on the options of the main menu. The project Text of the sub-menu should be set in advance. Based on this idea, I used the combined array record sub-menu option in javascript, which was automatically generated when php loaded. As a result, the author designs the following javascript function setmenu ():

Function setmenu () {menu = array ("a", "B", "c"); // constructs a menu Union array

<? Php // start the php program $ db = new my_db (); $ db-> database = "***"; // construct a new mysql connection, phplib $ mmenu = array ("a", "B", "c") is used here; // The simplified for ($ I = 0; $ I <count ($ mmenu); $ I ++) {$ id = $ mmenu [$ I]; $ db-> query ("select menu from class where menuid = '". $ id. "'"); // assume that the menu options are stored in the menu field of the class table. menuid is used to identify the menu while ($ db-> next_record ()) {$ smenu [] = """. $ db-> f ("menu "). ";} if (isset ($ smenu) & is_array ($ smenu) {$ str = implode (", ", $ Smenu); echo "menu [" $ id "] = array ($ str); ntt"; // complete the unset ($ smenu) filling of the menu Union array ); // Delete the smenu variable }}?> // End the php Program

With (document) {id = all ("mmenu "). value; // obtain the value of the main menu. arr_menu = menu [id]; for (I = all ("smenu "). options. length; I> = 0; I --) {all ("smenu "). options. remove (I); // you need to clear the original project} if (arr_menu.length = 0) {return;} for (I = 0; I <arr_menu.length; I ++) {obj = createelement ("option"); obj. text = arr_class [I]; all ("smenu "). options. add (obj );}}

In this way, each time the document is displayed, the php part is interpreted as the javascript language. When you click the main menu, the submenu is automatically updated. Similarly, readers can create more complex menu options based on this idea.

Finally, I will briefly introduce how to maintain the last menu item status after the form is submitted. There are actually a lot of tips, and the author uses the implicit variable method. Add the following code to the form:

<input type="hidden" name="h1">  <input type="hidden" name="h2"> 

We only need to assign values to each implicit variable in the onsubmit () event of the form. That is:

document.all("h1").value=document.all("mmenu").selectedindex;  document.all("h2").value=document.all("smenu").selectedindex; 

To use implicit variables, in the onload () event of the document body, we use the php method (or other methods) to control the display of menus:

<? Php if (! Isset ($ h1) {// you only need to judge $ h1 $ h1 = 0; $ h2 = 0;} echo "document. all ("mmenu "). selectedindex = ". $ h1. "; ntt"; echo "document. all ("mmenu "). click (); ntt "; echo" document. all ("mmenu "). selectedindex = ". $ h1. "; ntt"; echo "document. all ("smenu "). selectedindex = ". $ h2;?>

So far, we have implemented a dynamic implementation of the double drop-down menu.