最近經常被詢問的問題就是如何建立動態下拉式選單 (二階層),一個月之內被問了不下十次,其實單純要做到動態下拉式選單 (二階層) 並不困難,但是要和資料庫結合,把資料庫的資料以動態下拉式選單來建立就必須要加上一點技巧了,今天筆者也不打算做二階層的動態下拉式選單,乾脆直接挑戰三階層,再把資料庫一起結合,讓大家了解的透徹一點。
首先先讓我們看看靜態下拉式選單(三階層) 的原始程式,等你看懂了之後咱們再利用 ASP 和 SQL 來產生動態下拉式選單 (三階層):
動態下拉式選單 (三階層):
表單名稱為 myForm
第一個下拉式選單名稱為 color
顏色:
紅色">紅色
黃色">黃色
綠色">綠色
第二個下拉式選單名稱為 fruit
水果:
蘋果
蓮霧
李子
第三個下拉式選單名稱為 price
價格:
10元
20元
30元
定義顏色下拉式選單為一個一維陣列,且陣列長度為三(表示有三種顏色)
key=new Array(3);
//定義顏色下拉式選單中第一個顏色選項為一個一維陣列,且陣列長度為三(表示有三種水果),以下依此類推
key[0]=new Array(3);
key[1]=new Array(2);
key[2]=new Array(3);
//這邊重複定義一個陣列是為了在指定水果下拉式選項中之水果名稱時已經把水果名稱
//指定給相關的陣列索引,這些陣列索引無法被重複定義成陣列,為了要讓價格下拉式選
//單能沿用之前所定義的陣列值,所以我們在此處另外再定義一個一模一樣的陣列索引。
key1=new Array(3);
key1[0]=new Array(3);
key1[1]=new Array(2);
key1[2]=new Array(3);
//定義水果下拉式選單中第一個水果選項為一個一維陣列,且陣列長度為三(表示有三種
//價格),此水果是屬於顏色下拉式選單中之第一種顏色,以下依此類推
key1[0][0]=new Array(3);
key1[0][1]=new Array(3);
key1[0][2]=new Array(3);
//定義水果下拉式選單中第一個水果選項為一個一維陣列,且陣列長度為三(表示有三種
//價格),此水果是屬於顏色下拉式選單中之第二種顏色,以下依此類推
key1[1][0]=new Array(3);
key1[1][1]=new Array(3);
//定義水果下拉式選單中第一個水果選項為一個一維陣列,且陣列長度為三(表示有三種
//價格),此水果是屬於顏色下拉式選單中之第三種顏色,以下依此類推
key1[2][0]=new Array(3);
key1[2][1]=new Array(3);
key1[2][2]=new Array(3);
//指定水果下拉式選項中之水果名稱
//紅色
key[0][0]="蘋果";
key[0][1]="蓮霧";
key[0][2]="李子";
//黃色
key[1][0]="柳丁";
key[1][1]="葡萄柚";
//綠色
key[2][0]="芭樂";
key[2][1]="西瓜";
key[2][2]="棗子";
//指定價格下拉式選單中各個水果的價格
//蘋果
key1[0][0][0]="10元"
key1[0][0][1]="20元"
key1[0][0][2]="30元"
//蓮霧
key1[0][1][0]="40元"
key1[0][1][1]="50元"
key1[0][1][2]="60元"
//李子
key1[0][2][0]="70元"
key1[0][2][1]="80元"
key1[0][2][2]="90元"
//柳丁
key1[1][0][0]="100元"
key1[1][0][1]="110元"
key1[1][0][2]="120元"
//葡萄柚
key1[1][1][0]="130元"
key1[1][1][1]="140元"
key1[1][1][2]="150元"
//芭樂
key1[2][0][0]="160元"
key1[2][0][1]="170元"
key1[2][0][2]="180元"
//西瓜
key1[2][1][0]="190元"
key1[2][1][1]="200元"
key1[2][1][2]="210元"
//棗子
key1[2][2][0]="220元"
key1[2][2][1]="230元"
key1[2][2][2]="240元"
//改變顏色下拉式選單之選項值時,會觸動 Buildkey 函數,並將顏色下拉式選單中之選
//項索引值傳給 num 變數,以本範例而言,紅色會傳來 0 的索引值,黃色會傳來 1 的索引
//值,綠色會傳來 2 的索引值
function Buildkey(num)
{
//將水果下拉式選單之指標索引指定為0。
document.myForm.fruit.selectedIndex=0;
//由於改變水果下拉式選單時,價格下拉式選單也必須跟著變動,所以我們在此順便呼
//叫 Buildkey1函數,並強迫價格下拉式選單中之選項索引值為 0 ,表示不管目前是何種
//顏色的水果,價格下拉式選單都會呈現此水果的第一種價格
Buildkey1(0);
//這邊是最關鍵的步驟,在 JavaScript 中,for(ctr=0;ctr//[color=#0000ff]就等於 VBScript 中的 For ctr = 0 to key[num].length,若有不懂的地方建議大
//家買一本 JavaScript 的書來看,舉個範例來說明底下的程式大家會比較清楚,當我們
//選了紅色之後,此時 num=0 (前面已經說過了),此時 key[0]的陣列長度我們可以透過
//先前定義得知, key[0].length=3,而水果下拉式選單將開始改變,水果下拉式選單中
//第一個選項將變成key[0][0],也就是蘋果,水果下拉式選單中第二個選項將變成key
//[0][1],也就是蓮霧,水果下拉式選單中第三個選項將變成key[0][2],也就是李子,這樣
//大家該了解了吧!!
for(ctr=0;ctr將key[0].length指定為目前水果下拉式選單之索引陣列長度。
document.myForm.fruit.length=key[num].length;
}
function Buildkey1(num)
{
//將價格下拉式選單之指標索引指定為0。
document.myForm.price.selectedIndex=0;
//改變價格下拉式選單的選項除了跟水果下拉式選單相關之外,還跟目前所選顏色有關
//個範例來說明底下的程式大家會比較清楚,當我們選了紅色之後,此時
//document.myForm.color.selectedIndex=0 (因為紅色是顏色下拉式選單中之第
//一個指標索引值),如果我們在水果下拉式選單中選的水果是蓮霧,此時 num=1 ,而
//key1[document.myForm.color.selectedIndex][num].length 此時變成 key1
//[0][1].length,從之前的定義可以知道這個值是3,而價格下拉式選單將開始改變,價格//下拉式選單中第一個選項將變成key[0][1][0],也就是40 元,價格下拉式選單中第二
//
