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

In web page production, we often encounter this situation. Through the selection of the main drop-down menu, a sub-drop-down menu is dynamically generated. For example: There are three options in the main menu: "Focus News", "Lifestyle", and "Mood Stories". By selecting "Focus News", submenus are automatically generated such as "Domestic", "International", "Sports", "Entertainment", and so on.

Using javascript, we can easily achieve the above effects. But the problem is that if the options in the menu are dynamically extracted from a database (or other file), it is not easy to implement. Based on my own practical experience, the author introduces to you an implementation method using javascript + php. The database in this article uses mysql. In this example, the author will also introduce how to return to the previous selection state of the menu option after each form submission.

The function of php introduced in the article is to extract menu options from the database, and the other function is to generate javascript code. Readers can use their own familiar interpreted language, such as asp.

In order to simplify the code, the author assumes that the main menu has been constructed through html. Since the submenu requires dynamic design, only the basic frame is drawn. The html code is as follows:

//Main menu design

Focus News

Lifestyle

Mood Story

//The value must be consistent with the menu array below



/ /Submenu Design



What we need to consider is what steps need to be completed for the menu's onchange() event. The general process is to construct submenu items based on the main menu options. It is best to set the item text of the submenu in advance. Based on this idea, the author uses a joint array in JavaScript to record the submenu options, and it is automatically generated by PHP when loading. Therefore, the author designed the following javascript function setmenu():

function setmenu(){

menu=array("a","b","c"); //Construct menu union array

< ?php //Start the php program

$db = new my_db();

$db->database = "***"; //Construct a new mysql connection, phplib is used here

$mmenu = array ("a","b","c"); //The author has simplified it 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 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 filling of the menu union array

unset($smenu); //Delete the smenu variable

}

}

?> //End the 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 original items

}

if (arr_menu.length==0){

return;

}

for(i=0;i
obj=createelement("option");

obj.text=arr_class[i];

all("smenu").options.add (obj);

}

}

}

This way every time the document is displayed, the php part will be interpreted as javascript language, and when the main menu is clicked, the submenu will automatically update. By the same token, readers can create more complex multiple menu options based on this idea.

Finally, the author briefly introduces how to maintain the previous state of the menu item after the form is submitted. There are actually many techniques, but the author uses the implicit variable method. Add the following code to the form:





We only need to add Just assign a value to each implicit variable in the onsubmit() event. That 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 onload() event of the document body, we use the php method (other methods can also be used ) to control the display of the menu:


if (!isset($h1)){ //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 Dynamic implementation method of double drop-down menu.