WEB开发网
开发学院网页设计JavaScript JavaScript+PHP 应用一:网页制作中双下拉菜单的... 阅读

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

 2010-09-14 13:30:38 来源:WEB开发网   
核心提示:在网页制作中,常常遇到这种情况,JavaScript+PHP 应用一:网页制作中双下拉菜单的动态实现,通过主下拉菜单的选择,动态的生成子下拉菜单,笔者假设主菜单已经通过HTML构造,由于子菜单需要动态设计,例如:在主菜单中有“焦点新闻”、“生活时尚”、“心情故

在网页制作中,常常遇到这种情况,通过主下拉菜单的选择,动态的生成子下拉菜单。例如:在主菜单中有“焦点新闻”、“生活时尚”、“心情故事”三个选项,通过“焦点新闻”的选择,子菜单自动生成如“国内”、“国际”、“体育”、“文娱”,依此类推。<?xml:namespace prefix = o ns = "urn:schemas-microsoft-com:office:office" />

利用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>

1 2 3 4 5  下一页

Tags:JavaScript PHP 应用

编辑录入:爽爽 [复制链接] [打 印]
赞助商链接