摘要:[JS][ASP]下拉連動程式設計
關於連動下拉之議題早就是個很古老的議題，
解決辦法有些是完全使用SERVER端程式來處理，例：ASP，
這樣會讓整個畫面更新一次 ，如此的作法早就不太被人採用，
由其JQUERY出現之後，就更少人會採用如此的作法，
而我原本也是想試看看使用JQUERY+ASP來解決這問題，
但，我並沒有找到太多的資源來協助我(因為我對JQUERY一點也不熟)，
所以我決定採用JS+ASP，來開發。
第一，先準備連動下拉的資料，並把它存入 JS變數中，
把APS的資料存成 CODE1:TEXT1，……，CODEn:TEXTn，
再將整串的字串存放入strOrgType_<%=上一層CODE%>，
其中 『strOrgType_』為自定的前置字串，
(如何從資料庫取得資料與如何將資料轉換成上述格式不另外說明)
1: ''''由『第一階』 分別『取得 第二階』，並寫入JS字串中
2: set dicMuOrgValDown1 = Server.CreateObject("Scripting.Dictionary")
3: aryKeys = dicMuDeptCode.Keys 4: intCount = dicMuDeptCode.Count5: for i =0 to intCount-1
6: strMuOrgCode = aryKeys(i) 7: strValue = dicMuDeptCode.item(aryKeys(i))8: if (strMuOrgCode<>"") then
9: Call getMuOrgValDown("01","02",strMuOrgCode, dicMuOrgValDown1)
10: end if
11: 12: ''''將資料由dic格式轉換成字串
13: strMuOrgValDown1 = getDicToString(dicMuOrgValDown1) 14: 15: %> 16: <script >17: strOrgType_<%=strMuOrgCode%>='<%=strMuOrgValDown1%>'
18: //alert(strOrgType_<%=strMuOrgCode%>)
19: </script> 20: <% 21: next 22: 23: 24: ''''由『 第二階』 分別取得『第三階』，並寫入JS字串中
25: set dicMuOrgValDown2 = Server.CreateObject("Scripting.Dictionary")
26: aryKeys = dicMuAreaCode.Keys 27: intCount = dicMuAreaCode.Count28: strMuOrgCode =""
29: for i =0 to intCount-1
30: strMuOrgCode = aryKeys(i) 31: strValue = dicMuAreaCode.item(aryKeys(i))32: if (strMuOrgCode<>"") then
33: Call getMuOrgValDown("02","03",strMuOrgCode, dicMuOrgValDown2)
34: end if
35: 36: ''''將資料由dic格式轉換成字串
37: strMuOrgValDown2 = getDicToString(dicMuOrgValDown2) 38: %> 39: <script >40: strOrgType_<%=strMuOrgCode%>='<%=strMuOrgValDown2%>'
41: //alert(strOrgType_<%=strMuOrgCode%>)
42: </script> 43: <%
第二，已從資料庫取得連動下拉所需的資料並存入JS變數中，
接下來，完成執行下列JS function 就可以達到此目的，
當點選第一階選單時，會先處理會利用strOrgType_上一層CODE，
取得下一層LIST的字串，並以『，』分離成陣列，
再以『：』分離第二個陣列，
然後再重新產生前先將原本的LIST清空，並新增一個預設選項，
之後逐一新增選項。
1: //////////////////////////////////////////////////////////////////////////
2: // 功能 連動 選單 //
3: // 使用前：把連動關係用
4: // strKeyWord +上階值 = 下階值1:下階說明1,下階值2:下階說明2,...........,
5: //下階值n:下階說明n 來表達//
6: /////////////////////////////////////////////////////////////////////////////
7: 8: //取得『選單物件1』連動『選單物件2』
9: //objLevel1 ：『選單物件1』
10: //objlevel2 ：『選單物件2』
11: //strKeyWord 前置關鍵字 ：用來取得來自asp的選單參數
12: 13: function chgSelectItem(strSelect1,strSelect2,strKeyWord){ 14: 15: //alert('111')
16: //alert(objSelect1.selectedIndex)
17: var strSelect1Value = document.all[strSelect1].options[document.all[strSelect1].selectedIndex].value;
18: if (strSelect1Value=="undefined") return false;
19: if (strSelect1Value=="") return false;
20: //var strSelect1Value = objSelect1[1].value;
21: //alert("strSelect1Value == >"+strSelect1Value)
22: var strNewOptions = eval(strKeyWord+strSelect1Value);23: //alert("strNewOptions == > "+strNewOptions)
24: //清除原來選項
25: var g = DeleteItemToSelectAll(strSelect2); 26: 27: //將更新連動選項
28: var arrNewOptions = strNewOptions.split(',');//按照『，』分割
29: var tmp 30: 31: //alert("arrNewOptions.length ===>"+arrNewOptions.length)
32: var arrNewValues;33: for( var i =0 ; i < arrNewOptions.length-1 ; i++){
34: //alert("~~~~arrNewOptions["+i+"] ==> "+arrNewOptions[i])
35: tmp = arrNewOptions[i]36: arrNewValues = tmp.split(':');//按照『:』分割
37: //alert(arrNewValues[0]+":"+arrNewValues[1])
38: var q = AddItemToSelect(strSelect2, arrNewValues[0]+'-'+arrNewValues[1], arrNewValues[0]);
39: } 40: 41: } 42: 43: 44: 45: // 1.判斷select選項中是否存在Value="paraValue"的Item
46: //strSelect ： 欲被檢查的下拉選單
47: //strItemValue ：欲被檢查的值
48: 49: 50: function SelectIsExitItem(strSelect, strItemValue) { 51: 52: //alert('SelectIsExitItem')
53: var objSelect = document.all[strSelect];54: var isExit = false;
55: for (var i = 0; i < objSelect.options.length; i++) {
56: if (objSelect.options[i].value == strItemValue) {
57: isExit = true;
58: break;
59: } 60: } 61: 62: //alert('777777')
63: return isExit;
64: } 65: 66: 67: // 向select選項中加入一個Item
68: //strSelect ：增加 的下拉選單
69: //strItemText ：增加 的下拉選單說明
70: //strItemValue：增加 的下拉選單值
71: 72: function AddItemToSelect(strSelect, strItemText, strItemValue) { 73: var objSelect = document.all[strSelect];74: //alert('11')
75: //判斷是否存在
76: 77: if (SelectIsExitItem(strSelect, strItemValue)) {
78: //alert("該Item的Value值已經存在");
79: } 80: else {
81: 82: //alert("add GO")
83: var varItem = new Option(strItemText, strItemValue);
84: objSelect.options.add(varItem); 85: //alert("成功加入");
86: 87: }88: //alert('22')
89: } 90: 91: 92: 93: // 清空select的項全部
94: 95: function Delet 96: var objSelect = document.all[strSelect];97: //alert('DeleteItemToSelectAll')
98: objSelect.options.length = 0;99: g=AddItemToSelect(strSelect, '請選擇', '') //產生一個預設值
100: //alert('ddddddddddddddddd')
101: } 102: 103: /////////////////////////////////////////////////////////////////////////////
第三，完成上述程式後，基本上已經可以RUN，
只要把他加入SELECT標記後，如：
onChange="chgSelectItem
('cboMuAreaCode','cboMuGroupCode','strOrgType_')，
最後還有一個問題，就是初次載入資料時，並不會連動，
使用者會選到錯誤的資料，所以，當資料載入之後，記得先RUN一下function，
再指定原本已選定的值objSelect.value = '<%=strMuAreaCode%>';
如此，就已經很完善了。
1: <script>2: // 載入時，先依設定值作連動，此時，
3: // 才不會在載入時變成可選擇到其它不在範圍內的資料
4: var objSelect
5: g=chgSelectItem('cboMuDeptCode','cboMuAreaCode','strOrgType_');
6: objSelect = document.all['cboMuAreaCode'];
7: objSelect.value = '<%=strMuAreaCode%>';
8: g=chgSelectItem('cboMuAreaCode','cboMuGroupCode','strOrgType_');
9: objSelect = document.all['cboMuGroupCode'];
10: objSelect.value = '<%=strMuGroupCode%>';
11: </script>