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

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

 2007-11-27 18:01:17 来源:WEB开发网   
核心提示:在网页制作中,常常遇到这种情况,javascript+PHP 应用一:网页制作中双下拉菜单的动态实现,通过主下拉菜单的选择,动态的生成子下拉菜单,由此,笔者设计了如下的JavaScript函数setMenu():function setMenu(){ menu=Array(a,b,c); //构造m

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

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

文章中所介绍的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(和PHP搭配之最佳组合)连接,这里使用了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++){

Tags:avascript PHP 应用

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