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."'");

//假設菜單選項存放在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<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.";ntt";

echo "document.all("mmenu").click();ntt";

echo "document.all("mmenu").selectedindex=".$h1.";ntt";

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

?>

至此,我們已經實現雙下拉式功能表的動態實現方法。


相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

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

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