JavaScript Combined with PHP to Realize the Dynamic Realization of Double Drop down Menu in Web Page Making

  • 2021-11-30 01:05:15
  • OfStack

This paper introduces the dynamic realization code of double drop-down menu, for example, there are three options in the main menu: "Focus News", "Life Fashion" and "Mood Story". Through the selection of "Focus News", submenus are automatically generated such as "Domestic", "International", "Sports" and "Entertainment", and so on.

With javascript, we can easily achieve the above effect. But the problem is that if the menu options are dynamically extracted from the database (or other files), it will not be easy to implement. According to my own practical experience, the author introduces a realization method using javascript + php, and the database in this paper adopts mysql. In this example, I will also show you how to return to the last menu option selection after each form submission.

The role of php introduced in this article is to extract menu options from the database, and the other role is to generate javascript code. Readers can use an interpretive language they are familiar with, such as asp.

To simplify the code, assume that the main menu has been constructed through html. Because the submenus need 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 related to the following menu Array phase 1 To  
 
</select> 
 
<select name="smenu"> // Submenu design  
 
</select> 

What we need to consider is what steps the menu's onchange () event needs to complete. The general process is to construct submenu items according to the options of the main menu. The item text of submenu is best set in advance. According to this idea, the author adopts the joint array record submenu option in javascript, which is automatically generated by php when loading. Therefore, the author designed the following javascript function setmenu ():


function setmenu(){ 
 
menu=array("a","b","c"); // Structure menu Associative array  


<?php // Begin php Program  
 
$db = new my_db(); 
 
$db->database = "***"; // Construct a new mysql Connection, which is used here phplib 
 
$mmenu = array("a","b","c"); // Here, the author has simplified it  
 
for ($i=0;$i<count($mmenu);$i++){ 
 
$id = $mmenu[$i]; 
 
$db->query("select menu from class where menuid ='".$id."'"); 
 
// Assume that menu options are stored in class Tabular menu Field, menuid 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"; 
 
// Finish menu Filling of associative arrays  
 
unset($smenu); // Delete smenu Variable  
 
} 
 
} 
 
?> // End php Program  

with (document) { 
 
id=all("mmenu").value; // Object of the main menu value Value  
 
arr_menu=menu[id]; 
 
for(i=all("smenu").options.length;i>=0;i--){ 
 
all("smenu").options.remove(i); // Existing items need to be cleared  
 
} 
 
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); 
 
} 
 
} 

This way, each time the document is displayed, the php section is interpreted as the javascript language, and the submenus are automatically updated when the main menu is clicked. By the same token, readers can create more complex multi-menu options according to this idea.

Finally, the author briefly introduces 1, how to achieve the form submitted, still maintain the status of the menu item once. In fact, there are many skills, but the author adopts 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 a value to each implicit variable in the onsubmit () event of the form form. Namely:


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

To take advantage of implicit variables, in the onload () event of the document's body, we use the php method (and other methods are available) to control the display of the menu:


<?php 
 
if (!isset($h1)){ // Just 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 the dynamic implementation method of double drop-down menus.


Related articles: