JavaScript结合PHP实现网页制作中双下拉菜单的动态实现

<select name="mmenu" onchange="java script:setmenu()"> //主菜单设计 
 
<option value="a">焦点新闻</option> 
 
<option value="b">生活时尚</option> 
 
<option value="c">心情故事</option> 
 
//value必须与下文的menu数组相一致 
 
</select> 
 
<select name="smenu"> //子菜单设计 
 
</select> 

function setmenu(){ 
 
menu=array("a","b","c"); //构造menu联合数组 

<"***"; //构造新的mysql连接，这里使用了phplib 
 
$mmenu = array("a","b","c"); //这里笔者作了简化 
 
for ($i=0;$i<count($mmenu);$i++){ 
 
$id = $mmenu[$i]; 
 
$db->query("select menu from class where menuid ='".$id."'"); 
 
//假设菜单选项存放在class表的menu字段，menuid用来标识menu 
 
while ($db->next_record()){ 
 
$smenu[] = """.$db->f("menu")."""; 
 
} 
 
if (isset($smenu) && is_array($smenu)){ 
 
$str = implode(",",$smenu); 
 
echo "menu["$id"] =array($str);ntt"; 
 
//完成menu联合数组的填充 
 
unset($smenu); //删除smenu变量 
 
} 
 
} 
 
"htmlcode">

with (document) { 
 
id=all("mmenu").value; //获得主菜单的value值 
 
arr_menu=menu[id]; 
 
for(i=all("smenu").options.length;i>=0;i--){ 
 
all("smenu").options.remove(i); //需要清除原有的项目 
 
} 
 
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); 
 
} 
 
} 


这样每次显示文档时，php部分将解释为javascript语言，当单击主菜单时，子菜单将自动更新。同样道理，读者可以根据此思路，创造更复杂的多重菜单选项。 


最后，笔者简要介绍一下，如何实现在表单提交后，仍然保持菜单项上一次的状态。技巧其实很多，而笔者采用的是隐含变量法。在表单中添加如下代码： 




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



 我们只需要在form表单的onsubmit()事件中给每个隐含变量赋值即可。即：  


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


为了利用隐含变量，在文档的body的onload()事件中，我们利用php方法（也可用其它方法）来控制菜单的显示： 




<"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; 
 
?> 



至此，我们已经实现双下拉菜单的动态实现方法。