JavaScript+PHP應用一:網頁

來源:互聯網
上載者:User
JavaScript+PHP 應用一:網頁製作中雙下拉式功能表的動態實現
---摘自互連網
在網頁製作中,常常遇到這種情況,通過主下拉式功能表的選擇,動態產生子下拉式功能表。例如:在主菜單中有“焦點新聞”、“生活時尚”、“心情故事”三個選項,通過“焦點新聞”的選擇,子功能表自動產生如“國內”、“國際”、“體育”、“文娛”,依此類推。
利用javascript,我們可以輕鬆實現上述效果。但問題是,如果菜單中的選項是從資料庫(或其他檔案)中動態提取,實現起來就並不是輕而易舉了。筆者根據自己的實際經驗,向大家介紹一種利用javascript + php的實現方法,文中的資料庫採用mysql。在本例中,筆者還將介紹在每一次表單提交之後,如何返回上一次菜單選項的選擇狀態。
文章中所介紹的php的作用,一是用來從資料庫中提取菜單選項,另一作用,就是用來產生javascript代碼。讀者可以採用自己熟悉的解釋型語言,如asp。
為了簡化代碼,筆者假設主菜單已經通過html構造,由於子功能表需要動態設計,所以只繪製了基本架構,html代碼如下:
<select name="mmenu" onchange="java script: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."'");
相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.