javascript＋PHP 应用一：网页制作中双下拉菜单的动态实现
在网页制作中，常常遇到这种情况，通过主下拉菜单的选择，动态的生成子下拉菜单。例如：在主菜单中有“焦点新闻”、“生活时尚”、“心情故事”三个选项，通过“焦点新闻”的选择，子菜单自动生成如“国内”、“国际”、“体育”、“文娱”，依此类推。
利用JavaScript，我们可以轻松实现上述效果。但问题是，如果菜单中的选项是从数据库（或其他文件）中动态提取，实现起来就并不是轻而易举的了。笔者根据自己的实际经验，向大家介绍一种利用JavaScript ＋ php的实现方法，文中的数据库采用MySQL。在本例中，笔者还将介绍在每一次表单提交之后，如何返回上一次菜单选项的选择状态。
文章中所介绍的php的作用，一是用来从数据库中提取菜单选项，另一作用，就是用来生成JavaScript代码。读者可以采用自己熟悉的解释型语言，如asp。
为了简化代码，笔者假设主菜单已经通过HTML构造，由于子菜单需要动态设计，所以只绘制了基本框架，HTML代码如下：
<select name=mmenu onChange=javascript:setMenu()> //主菜单设计
<option value=a>焦点新闻</option>
<option value=b>生活时尚</option>
<option value=c>心情故事</option>
//value必须与下文的menu数组相一致
</select>
<select name=smenu> //子菜单设计
</select>
我们需要考虑的是，菜单的OnChange()事件需要完成哪些步骤。其大致过程是，根据主菜单的选项，构造子菜单项目。而子菜单的项目文字最好事先设定。根据这个思路，笔者采用了JavaScript中的联合数组记录子菜单选项，并由php在加载时自动生成。由此，笔者设计了如下的JavaScript函数setMenu()：
function setMenu(){
menu=Array(a,b,c); //构造menu联合数组
<?php //开始php程序
$DB = new My_DB();
$DB->Database = ***; //构造新的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);\n\t\t;
//完成menu联合数组的填充
unset($smenu); //删除smenu变量
}
}
?> //结束php程序
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++){
- 最新文章
- 双向链表&&堆栈[01-10]
- 一个通用的动态加载数据例子[01-10]
- 网页中的媒体播放器[01-10]
- 一个简单的俄罗斯方块脚本[01-10]
- 如何在页面显示来访者分辨率,浏览器[01-10]
- 对象化JS之 --文件上传客户端控制脚本[01-10]
- 相关文章
- 一个通用的动态加载数据例子[01-10]
- 关于如何动态地在同一页面实现两个 互传 (s1 s2)[01-10]
- 非模式对话框(showModelessDialog)在IE中..[01-10]
- 动态添加删除行的HTC行为组件[01-10]
- ASP应用:用stream读文件[01-10]
- DW+ASP 玩转动态二级菜单[01-10]
