JavaScript+PHP 应用一:网页制作中双下拉菜单的动态实现

在网页制作中,常常遇到这种情况,通过主下拉菜单的选择,动态的生成子下拉菜单。例如:在主菜单中有“焦点新闻”、“生活时尚”、“心情故事”三个选项,通过“焦点新闻”的选择,子菜单自动生成如“国内”、“国际”、“体育”、“文娱”,依此类推。

利用javascript,我们可以轻松实现上述效果。但问题是,如果菜单中的选项是从数据库(或其他文件)中动态提取,实现起来就并不是轻而易举的了。笔者根据自己的实际经验,向大家介绍一种利用javascript + php的实现方法,文中的数据库采用mysql。在本例中,笔者还将介绍在每一次表单提交之后,如何返回上一次菜单选项的选择状态。

文章中所介绍的php的作用,一是用来从数据库中提取菜单选项,另一作用,就是用来生成javascript代码。读者可以采用自己熟悉的解释型语言,如asp。

为了简化代码,笔者假设主菜单已经通过html构造,由于子菜单需要动态设计,所以只绘制了基本框架,html代码如下:

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

我们需要考虑的是,菜单的onchange()事件需要完成哪些步骤。其大致过程是,根据主菜单的选项,构造子菜单项目。而子菜单的项目文字最好事先设定。根据这个思路,笔者采用了javascript中的联合数组记录子菜单选项,并由php在加载时自动生成。由此,笔者设计了如下的javascript函数setmenu():

function setmenu(){

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

1 //开始php程序   
2  
3$db = new my_db();   
4  
5$db->database = "***"; //构造新的mysql连接,这里使用了phplib   
6  
7$mmenu = array("a","b","c"); //这里笔者作了简化   
8  
9for ( $i=0; $i

<count( $db-="" $i++){="" $i];="" $id="$mmenu[" $mmenu);="">query("select menu from class where menuid ='". $id."'");

//假设菜单选项存放在class表的menu字段,menuid用来标识menu

while ( $db-&gt;next_record()){

$smenu[] = """. $db-&gt;f("menu").""";

}

if (isset( $smenu) &amp;&amp; is_array( $smenu)){

$str = implode(",", $smenu);

echo "menu[" $id"] =array( $str);ntt";

//完成menu联合数组的填充

unset( $smenu); //删除smenu变量

}

}

 1  
 2with (document) {   
 3  
 4id=all("mmenu").value; //获得主菜单的value值   
 5  
 6arr_menu=menu[id];   
 7  
 8for(i=all("smenu").options.length;i&gt;=0;i--){   
 9  
10all("smenu").options.remove(i); //需要清除原有的项目   
11  
12}   
13  
14if (arr_menu.length==0){   
15  
16return;   
17  
18}   
19  
20for(i=0;i<arr_menu.length;i++){ <input="" all("smenu").options.add(obj);="" name="h1" obj='createelement("option");' obj.text="arr_class[i];" type="hidden" }="" 最后,笔者简要介绍一下,如何实现在表单提交后,仍然保持菜单项上一次的状态。技巧其实很多,而笔者采用的是隐含变量法。在表单中添加如下代码:="" 这样每次显示文档时,php部分将解释为javascript语言,当单击主菜单时,子菜单将自动更新。同样道理,读者可以根据此思路,创造更复杂的多重菜单选项。="">
21<input name="h2" type="hidden"/>   
22  
23我们只需要在form表单的onsubmit()事件中给每个隐含变量赋值即可。即:   
24  
25document.all("h1").value=document.all("mmenu").selectedindex;   
26  
27document.all("h2").value=document.all("smenu").selectedindex;   
28  
29为了利用隐含变量,在文档的body的onload()事件中,我们利用php方法(也可用其它方法)来控制菜单的显示:   
30  

if (!isset( $h1)){ //只需要判断 $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;

1  
2至此,我们已经实现双下拉菜单的动态实现方法。</arr_menu.length;i++){></count(>
Published At
Categories with Web编程
Tagged with
comments powered by Disqus