多階層型 Select List

多階層型 Select List

此次範例主要是網友詢問 5 階層的 Select List 如何處理，若按照之前的範例來做得話，那會被繁雜的宣告給搞混，因此另外構思較簡易的方式，同樣是要用到陣列預先宣告各選項對映的項目，唯宣告方式較簡易，其運作需求條件如下：

上層改變，下層亦要跟著變化，因此在 select 標籤中宣告了 onChange 處理下層的變化
5 個選項齊全後，確認按鈕才能動作，因此在 input 按鈕使用了 disable 來處理作用與否

HTML 編寫:
<BODY onload="init();">

<form name="F">
請依次選擇：
<select name="C" onChange="SC1(this.selectedIndex);">
<option selected>請選擇主項目</option>
<option>主選項一</option>
<option>主選項二</option>
<option>主選項三</option>
</select>
<select name="C1" onChange="SC2(this.selectedIndex)"></select>
<select name="C2" onChange="SC3(this.selectedIndex)"></select>
<select name="C3" onChange="SC4(this.selectedIndex)"></select>
<select name="C4" onChange="SW(this.selectedIndex)"></select>
<input name="BT" type="button" value="確認" onclick="ShowSC();" DISABLED>
</form>


JavaScript 程式:

var C_list = "";

var C1_list = "";
var C1 = new Array();
C1[0] = "";
C1[1] = ["請選擇次選項", "次選項 1-1", "次選項 1-2", "次選項 1-3", "次選項 1-4"];
C1[2] = ["請選擇次選項", "次選項 2-1", "次選項 2-2", "次選項 2-3", "次選項 2-4"];
C1[3] = ["請選擇次選項", "次選項 3-1", "次選項 3-2", "次選項 3-3", "次選項 3-4"];

var C2_list = "";
var C2 = new Array();
C2[0] = "";
C2[1] = ["請選擇二次項", "二次項 1-1", "二次項 1-2", "二次項 1-3", "二次項 1-4"];
C2[2] = ["請選擇二次項", "二次項 2-1", "二次項 2-2", "二次項 2-3", "二次項 2-4"];
C2[3] = ["請選擇二次項", "二次項 3-1", "二次項 3-2", "二次項 3-3", "二次項 3-4"];

var C3_list = "";
var C3 = new Array();
C3[0] = "";
C3[1] = ["請選擇三次項", "三次項 1-1", "三次項 1-2", "三次項 1-3", "三次項 1-4"];
C3[2] = ["請選擇三次項", "三次項 2-1", "三次項 2-2", "三次項 2-3", "三次項 2-4"];
C3[3] = ["請選擇三次項", "三次項 3-1", "三次項 3-2", "三次項 3-3", "三次項 3-4"];

var C4_list = "";
var C4 = new Array();
C4[0] = "";
C4[1] = ["請選擇四次項", "四次項 1-1", "四次項 1-2", "四次項 1-3", "四次項 1-4"];
C4[2] = ["請選擇四次項", "四次項 2-1", "四次項 2-2", "四次項 2-3", "四次項 2-4"];
C4[3] = ["請選擇四次項", "四次項 3-1", "四次項 3-2", "四次項 3-3", "四次項 3-4"];

function SC1(IDX){
  C1_list.options.length = 0;
  if (IDX > 0) for (i=0; i<C1[IDX].length; i++) C1_list.options[C1_list.options.length] = new Option(C1[IDX][i]);
  SC2(0);
}
function SC2(IDX){
  C2_list.options.length = 0;
  if (IDX > 0) for (i=0; i<C2[IDX].length; i++) C2_list.options[C2_list.options.length] = new Option(C2[IDX][i]);
  SC3(0);
}
function SC3(IDX){
  C3_list.options.length = 0;
  if (IDX > 0) for (i=0; i<C3[IDX].length; i++) C3_list.options[C3_list.options.length] = new Option(C3[IDX][i]);
  SC4(0);
}
function SC4(IDX){
  C4_list.options.length = 0;
  if (IDX > 0) for (i=0; i<C4[IDX].length; i++) C4_list.options[C4_list.options.length] = new Option(C4[IDX][i]);
  else SW(0);
}
function SW(IDX){
  if (IDX > 0) document.F.BT.disabled=false;
  else document.F.BT.disabled=true;
}

function ShowSC(){
  temp = "";
  temp = C_list.options[C_list.options.selectedIndex].value + " ,";
  temp += C1_list.options[C1_list.options.selectedIndex].value + " ,";
  temp += C2_list.options[C2_list.options.selectedIndex].value + " ,";
  temp += C3_list.options[C3_list.options.selectedIndex].value + " , ";
  temp += C4_list.options[C4_list.options.selectedIndex].value;
  alert(temp);
}

function init(){
  C_list = document.F.C;
  C1_list = document.F.C1;
  C2_list = document.F.C2;
  C3_list = document.F.C3;
  C4_list = document.F.C4;
}

☆ 小恐龍工作坊製