javascript+php Application One: The dynamic implementation of double drop-down menu in Web page making (repost) _php

javascript+php Application One: The dynamic realization of double drop-down menu in Web page making

---excerpted from the Internet

In the Web page production, often encountered this situation, through the main drop-down menu selection, the dynamic generation of sub-drop-down menu. For example: In the main menu has "Focus News", "lifestyle", "Mood Story" three options, through the "Focus News" selection, sub-menu automatically generated such as "domestic", "international", "Sports", "entertainment", and so on.

With JavaScript, we can easily achieve these effects. The problem is that if the options in the menu are extracted dynamically from a database (or other file), it's not easy to implement. Based on my own practical experience, the author introduces a method of using JavaScript + PHP, and the database in this paper uses MySQL. In this example, I will also describe how to return the selection state of the last menu option after each form submission.

The role of PHP as described in this article is to extract menu options from the database, and another function is to generate JavaScript code. Readers can use their own familiar interpretive language, such as ASP.

To simplify the code, I assume that the main menu has been constructed from HTML, because the submenu needs to be dynamically designed, so only the basic framework is drawn, the HTML code is as follows:

Main Menu DesignSpotlight NewsLife styleMood story//value must match the menu array below

Sub-menu Design

What we need to consider is what steps the onchange () event of the menu needs to complete. The general process is to construct a submenu item based on the options in the main menu. The Sub-menu item text is best set beforehand. Based on this idea, the author uses the combined Array Record submenu option in JavaScript and is generated automatically by PHP at load time. Thus, the author has designed the following JavaScript function SetMenu ():

function SetMenu () {

Menu=array ("A", "B", "C"); Constructing a menu Union array


$db = new my_db ();

$db->database = "* * *"; Constructs a new MySQL connection, where phplib is used

$mmenu = Array ("A", "B", "C"); Here the author makes a simplification

for ($i =0; $i

$id = $mmenu [$i];

$db->query ("Select Menu from class where MenuID = '". $id. "");

Assuming that the menu option is stored in the Class table's menu field, the MenuID is used to identify 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 fill of the menu Union array

Unset ($smenu); Delete Smenu variable

}

}

?>//End PHP Program

With (document) {

Id=all ("Mmenu"). Value; Get the 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 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 section is interpreted as the JavaScript language, and the submenu is automatically updated when the main menu is clicked. Similarly, readers can create more complex multi-menu options based on this idea.

Finally, the author briefly introduces how to implement the status of the menu item once the form is submitted. The technique is actually many, but the author uses the implicit variable method. Add the following code to the form:





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

document.all ("H1"). Value=document.all ("Mmenu"). SelectedIndex;

document.all ("H2"). Value=document.all ("Smenu"). SelectedIndex;

In order to take advantage of the implied variables, in the onload () event of the body of the document, we use the PHP method (also available in other ways) to control the display of the menu:


if (!isset ($h 1)) {//$H1 only need to be judged

$h 1 = 0;

$h 2 = 0;

}

echo "document.all (" Mmenu "). selectedindex=". $h 1. "; NTT ";

echo "document.all (" Mmenu "). Click (); NTT";

echo "document.all (" Mmenu "). selectedindex=". $h 1. "; NTT ";

echo "document.all (" Smenu "). selectedindex=". $h 2;

?>

At this point, we have implemented the dynamic implementation of the double drop-down menu.

