JavaScript＋PHP 應用一：網頁製作中雙下拉選單的動態實現 (轉)

JavaScript＋PHP 應用一：網頁製作中雙下拉選單的動態實現 (轉)[@more@]

在網頁製作中，常常遇到這種情況，透過主下拉選單的選擇，動態的生成子下拉選單。例如：在主選單中有“焦點新聞”、“生活時尚”、“心情故事”三個選項，透過“焦點新聞”的選擇，子選單自動生成如“國內”、“國際”、“體育”、“文娛”，依此類推。:namespace prefix = o ns = "urn:schemas--com::office" />

利用script，我們可以輕鬆實現上述效果。但問題是，如果選單中的選項是從（或其他）中動態提取，實現起來就並不是輕而易舉的了。筆者根據自己的實際，向大家介紹一種利用 ＋ 的實現方法，文中的資料庫採用My。在本例中，筆者還將介紹在每一次表單提交之後，如何返回上一次選單選項的選擇狀態。

文章中所介紹的PHP的作用，一是用來從資料庫中提取選單選項，另一作用，就是用來生成JavaScript程式碼。讀者可以採用自己熟悉的解釋型語言，如。

為了簡化程式碼，筆者假設主選單已經透過HTML構造，由於子選單需要動態設計，所以只繪製了基本，HTML程式碼如下：

< name="mmenu" onChange="javascript:setMenu()"> //主選單設計

焦點新聞

生活時尚

心情故事

//value必須與下文的menu陣列相一致

  //子選單設計

我們需要考慮的是，選單的OnChange()事件需要完成哪些步驟。其大致過程是，根據主選單的選項，構造子選單專案。而子選單的專案文字最好事先設定。根據這個思路，筆者採用了JavaScript中的聯合陣列記錄子選單選項，並由PHP在載入時自動生成。由此，筆者設計瞭如下的JavaScriptsetMenu()：

function setMenu(){

  menu=Array("a","b","c");  //構造menu聯合陣列

  開始PHP

<p>

    $ = new My_DB(); 

    $DB->Database = "***";  //構造新的連線，這裡使用了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;

?>

至此，我們已經實現雙下拉選單的動態實現方法。