ITPub博客

首页 > 应用开发 > Java > JavaScript+PHP 应用一:网页制作中双下拉菜单的动态实现 (转)

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

原创 Java 作者:worldblog 时间:2007-12-02 09:21:42 0 删除 编辑
JavaScript+PHP 应用一:网页制作中双下拉菜单的动态实现 (转)[@more@]

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

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

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

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

<select name="mmenu" onChange="javascript:setMenu()"> //主菜单设计

//value必须与下文的menu数组相一致

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

function setMenu(){

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

  程序

    $db = new My_DB(); 

    $DB->Database = "***";  //构造新的MYSQL连接,这里使用了PHPLIB

    $mmenu = array("a","b","c");  //这里笔者作了简化

    for ($i=0;$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);ntt"; 

//完成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

    obj=createElement("option");

    obj.text=arr_class[i];

    all("smenu").options.add(obj);

  }

  }

}

这样每次显示文档时,PHP部分将解释为Javascript语言,当单击主菜单时,子菜单将自动更新。同样道理,读者可以根据此思路,创造更复杂的多重菜单选项。

最后,笔者简要介绍一下,如何实现在表单提交后,仍然保持菜单项上一次的状态。技巧其实很多,而笔者采用的是隐含变量法。在表单中添加如下代码:

我们只需要在Form表单的OnSubmit()事件中给每个隐含变量赋值即可。即:

document.all("h1").value=document.all("mmenu").selectedIndex;

document.all("h2").value=document.all("smenu").selectedIndex;

为了利用隐含变量,在文档的Body的onLoad()事件中,我们利用PHP方法(也可用其它方法)来控制菜单的显示:

  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;

?>

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


来自 “ ITPUB博客 ” ,链接:http://blog.itpub.net/10752043/viewspace-987323/,如需转载,请注明出处,否则将追究法律责任。

请登录后发表评论 登录
全部评论
  • 博文量
    6241
  • 访问量
    2448034