使用 select 標籤,我們可以產生單選或是多選的下拉式選單,但是這些選單的選項都是固定的,若要能夠即時改變這些選項,就要靠 JavaScript。本節將說明如何以 JavaScript 來即時改變這些選項,以產生動態的下拉式選單。
假設一個選單的名稱是 theList,那麼它所具有的性質可以說明如下:
- theList.options:此選單的選項,是一個陣列,其中每一個元素是一個代表選項的物件
- theList.options.length:選項的個數
- theList.options[i].text:第 i 個選項的文字
- theList.options[i].value:第 i 個選項的值
- theList.options.selectedIndex:反白選項的索引值。若無反白選項,則此變數值為 -1。(因此當反白選項存在時,theList.options[theList.options.selectedIndex].text 就是反白選項的文字。)
如果我們要刪除選單的選項,有兩種作法:
- 使用 theList.options[i]=null 可以直接刪除第 i 個選項。
- 使用 theList.options.length=n 可以將選項個數設定為 n,其餘多的選項將會被刪除。
若要增加選項,可以使用下列命令:
theList.options[i]=new Option(text, value);
其中 text 和 value 分別代表新選項的文字和值。必須小心的是:
- 如果 0 <= i < theList.options.length,那麼原先的第 i 個選項將會此新選項被取代。
- 如果 i = theList.options.length,那麼將會產生一個新的選項。
在下列範例中,我們可以動態地增加或刪除選項:
上述範例的完整原始檔案如下:
在上述範例中,我們使用 id 而不使用 name 來代表表單控制項,其好處是可以直接使用 id 來使用表單元素,而不必一定要經由文件物件模型的階層結構來由上到下、一層一層指定。
利用同樣的概念,我們可以產生類似樹狀的結構,可讓使用者進行「目錄搜尋」(Directory Search)。在下列範例中,我們利用動態下拉式選單產生兩層的樹狀結構,或稱「兩框連動」,換句話說,你只要在左方選取系別,右方就會出現成員,請試看看:
上述範例的完整原始檔案如下:
在上述範例中,我們用到了二維陣列,以方便存取相關資料。
使用類似的方式,我們也可以產生三層的樹狀結構,或稱「三框連動」。在下列範例中,我們將歌曲資料分成三個層次,分別是語言、歌手、歌名,以便進行目錄式搜尋,範例如下:
在上述範例中,你可以先在左方點選語言,中間就會顯示相關歌手,接著點選歌手,右方就會顯示相關歌名,接著你再點選歌名,下方就會出現完整的搜尋路徑。原始檔案如下:
在上述範例中,我們使用了一個自訂物件的建構函數 node(),以便用來建立此三層樹狀資料結構。此資料結構可以顯示如下:
國語 --- 張學友 --- 我等到花兒也謝了
--- 一千個傷心的理由
--- 咖啡
--- 張惠妹 --- 聽海
--- 剪愛
--- 原來你什麼都不要
--- 三天三夜
--- 劉德華 --- 謝謝你的愛
--- 來生緣
--- 忘情水
--- 伍佰 --- 浪人情歌
--- 樹枝孤鳥
--- 周華健 --- 花心
--- 心的方向
英語 --- Michael --- Beat It
--- Billie Jean
--- Heal The World
--- Celine --- My Heart Will Go On
--- Hope
JavaScript 程式設計與應用:用於網頁用戶端