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

原创 2000年12月01日 10:26:00

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

利用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++){

              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方法(也可用其它方法)来控制菜单的显示:

<?php

     if (!isset($h1)){  //只需要判断$h1

         $h1 = 0;

         $h2 = 0;

     }

     echo "document.all(/"mmenu/").selectedIndex=".$h1.";/n/t/t";

     echo "document.all(/"mmenu/").click();/n/t/t";

     echo "document.all(/"mmenu/").selectedIndex=".$h1.";/n/t/t";

     echo "document.all(/"smenu/").selectedIndex=".$h2;

?>

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

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

在网页制作中,常常遇到这种情况,通过主下拉菜单的选择,动态的生成子下拉菜单。例如:在主菜单中有“焦点新闻”、“生活时尚”、“心情故事”三个选项,通过“焦点新闻”的选择,子菜单自动生成如“国内...
  • zgqtxwd
  • zgqtxwd
  • 2008年04月24日 19:47
  • 108

javascript 二级动态下拉菜单选项

                var onecount2;subcat2 = new Array();onecount2=45;subcat2[0] = new Array("001001","00...
  • fhx007
  • fhx007
  • 2007年12月01日 19:42
  • 1814

Web前端开发实战2:二级下拉式菜单之JS实现

上一篇博文提到了二级下拉式菜单是用HTML和CSS实现的,我们这一篇来用JavaScript脚本实现下拉菜单的显 示和隐藏。使用 JavaScript方法实现我们需要用的知识有:         1)...
  • erlian1992
  • erlian1992
  • 2015年12月31日 14:04
  • 9305

Excel图表制作(二):下拉菜单实现动态图表

下拉菜单实现动态图表 使用名称管理器和index()函数实现数据动态选择,本例中的数据为1-6月份工作时间分配表,主要包括测试执行,自我学习,会议和其他三类数据。 使用下拉菜单动态选择月份: ...
  • tszhanghaihui
  • tszhanghaihui
  • 2016年01月21日 10:07
  • 1615

使用JavaScript实现创建动态下拉菜单

html> html lang="en"> head> meta charset="UTF-8"> title>利用二维数组创建动态下拉菜单title> script type...
  • pangqiandou
  • pangqiandou
  • 2017年09月25日 22:38
  • 402

网页中导航栏实现子菜单下拉效果

一、实现方式 通常菜单会用的形式实现:如 二、点击时子菜单下拉效果
  • u011387028
  • u011387028
  • 2016年03月09日 16:03
  • 4842

Android之——自定义下拉菜单的实现

做过Android开发的童鞋,一般都会遇到这样一种情况,就是Android中原有的下拉控件Spinner过于单调和简单,不能够满足我们实际开发的需求了,这时候就需要我们自己自定义下拉菜单来实现相应的功...
  • l1028386804
  • l1028386804
  • 2015年08月30日 09:14
  • 5500

使用CSS实现下拉菜单的动态显示

代码编辑器:sublime text 3  浏览器:Firefox 40.0.1 下划线标注的解释原因由于对css的学习还不够深刻,所以属于个人主观理解。如果有错误希望大神们指出。谢谢!...
  • Zwenzang
  • Zwenzang
  • 2015年10月13日 19:26
  • 1856

双活解决方案如何部署“应用”双活?

存储双活已家喻户晓人人皆知,但是,你知道存储双活+虚拟化+应用集群,应该如何部署呢?在“数据中心双活该如何构建”文章中,谈到要构建从应用、服务器、网络到存储的端到端双活,必须要求端到端每个部件支持双活...
  • swingwang
  • swingwang
  • 2017年08月04日 21:22
  • 2014

用一个表的三级联动下拉菜单

  • baoyonwei
  • baoyonwei
  • 2011年02月28日 11:43
  • 2597
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JavaScript+PHP 应用一:网页制作中双下拉菜单的动态实现
举报原因:
原因补充:

(最多只允许输入30个字)