JavaScript + PHP application 1: dynamic implementation of the double drop-down menu in webpage creation)

JavaScript + PHP application 1: the dynamic implementation of the double drop-down menu in the web page production --- from the Internet in the web page production, this situation is often encountered, through the selection of the main drop-down menu, dynamic generation of sub-drop-down menu. For example, there are three options in the main menu: "Focus News", "life style", and "mood story". through the "Focus News" option, submenu auto-generated JavaScript + PHP application 1: dynamic implementation of double drop-down menus in web page creation

--- From Internet

This is often the case when creating a web page. you can use the main drop-down menu to dynamically generate a sub-drop-down menu. For example, there are three options in the main menu: "Focus News", "life style", and "mood story". through the "Focus News" option, sub-menus are automatically generated, such as "domestic", "International", "sports", and "entertainment.

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, I 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:

// Main menu designFocus News Lifestyle Mood story // The value must be consistent with the menu array below

// Submenu design

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


$ Db = new my_db ();

$ Db-> database = "***"; // create a new mysql connection. phplib is used here.

$ Mmenu = array ("a", "B", "c"); // simplified here

For ($ I = 0; $ 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, and 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 ";

// Fill in the menu Union array

Unset ($ smenu); // 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
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:





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:


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.