二級聯動下拉式清單 asp+js

前言 

學網路編程的人幾乎都遇到過這種問題，就是選擇大城市小城市跟前聯動的效果，如果是在asp.net裡，很簡單，一個事件就可以解決了，在asp裡彷彿也
可以用傳值的方法解決此問題，不過要考慮到其它表單狀態儲存的問題，但是不管以上兩種方法哪一種，都有一個不好的地方，那就是頁面重新整理，總是閃來閃去的頁
面會讓人感覺到反感。

    為此已經出現了一門新技術 ajax
解決了重新整理頁面的問題，為此天道也專門研究了ajax，感覺也不是特別難，如果加以練習應該可以應用的更加靈活，在以後的文章中我會把ajax做一個詳細
的講解。今天這篇文章主要是講解asp和asp.net裡用js實現下拉式清單無重新整理聯動功能。

分析

   
首先我們這裡要解決的最重要問題就是無重新整理，既然是無重新整理，就不能讓頁面發送請求（如果是發送請求的無重新整理就是ajax了，這裡說的是除ajax以外的情
況），在asp.net裡，如果用事件來做二級聯動的話，是每次點第一個下拉式清單的時候發送一個請求，用選中的值去取出下一級的內容。這樣的話，就會每次
發送請求每次重新整理，asp裡也是一樣，所以要避免這個問題，這裡用到的一個辦法就是把所有的值都先調出來放到頁面裡，以供前面選擇展示，這樣就不會每次都
去發送請求去調資料了，當然也會有重新整理了。（如果資料量大，最好用ajax，因為這樣會增加頁面代碼量，不是特別大的這裡不考慮最佳化問題。）

一.
資料庫的設計。

   
可能你用這個功能做其它的大類小類的聯動，也可能像我一樣做城市之間的聯動，但是我還是要把庫結構說一下，以免我後面的代碼大家看不懂，這樣規劃一下，也
方便後面的講解。

table 1

----------表名：BCity----------

    BCityId    BCityName
1         
北京
2          河北

table 2

----------表名：SCity----------

SCityId    SCityName  BCityId
1         
海澱        1
2          朝陽        1
3          崇文        1
4         
承德        2
5          唐山        2
6          廊坊        2

關聯欄位: BCity.BcityId=SCity.BCityId

二.
實現原理JS編寫

   
我們要把所有的值都放到頁面裡，用js去控制他的顯示，所以我們首先想到的就是數組，我們先把所有的大城市載入到下拉式清單一裡，然後把把有的小類都載入到
js的一個數組裡，然後在根據大類的選擇去調出小城市。把小類都寫到數組裡，代碼如下：

<script
type="text/javascript">
<!--
var subval2 = new Array(); 
//這裡定義一個數組

     <%
set
ClassRs=server.CreateObject("adodb.recordset")
ClassSql="select * from
SCity
ClassRs.open ClassSql,conn,1,3

          if ClassRs.eof and ClassRs.bof
then  
Response.Write("暫無資訊")
else
count=0'定義數組的下標
do while not
ClassRs.eof
%>
subval2[<%=count%>] = new
Array('<%=ClassRs("BCityId")%>','<%=ClassRs("SCityId")%>','<%=ClassRs

("SCityName")%>');
<%
count=count+1
ClassRs.movenext                                                                       

                   

loop                                                             

ClassRs.close                                                                                 

   set
ClassRs=nothing                                                                                   
end
if
%>

代碼解釋：
首先要引入一個conn.asp資料庫連接檔案，這裡我省略掉了，然後就是調出SCity表裡的資料，count是定義的數組下標變數。

 subval2[<%=count%>] = new
Array('<%=ClassRs("BCityId")%>','<%=ClassRs("SCityId")%>','<%=ClassRs("SCityName")%>');
這條語句就是為數組依次賦值。一直到把所有的小城市全載入到這個數組裡，有人要問，這個數組裡怎麼是三個值，其中有一個是大城市的id，是的，我們就是用
這個來區分類別的，最後我們的二級列表也是根據這個值取出所對應的小城市的。有了這樣一個數組，我們還需要一個事件，把數組裡的值寫到下拉式清單中，接下來
在看一段代碼：

function
ClassChange(locationid)
{
document.form1.SelectClass.length =
0;
//document.form1.SelectClass.options[0] = new
Option('選擇小類','');//如果想直接選中第一個則注釋此句。

 for (i=0; i<subval2.length;
i++)
{
if (subval2[i][0] ==
locationid)
{
document.form1.SelectClass.options[document.form1.SelectClass.length]
= new Option(subval2[i]

[2],subval2[i][1]);
}
}
}

  分析：這是一個function
我們看到這個function有一個參數，這個參數我這裡告訴你是傳入的一個大城市的標識。我們就是根據這個值去取出所對應的小類列表。

 
代碼解釋：document.form1.SelectClass.length = 0;
首先先把下拉式清單二的值至為空白，否則會產生疊加現象。

document.form1.SelectClass.options[0] = new
Option('選擇小類','');這句話是填加選擇小城市項的，如果去掉這句則直接顯示第一個小城市。

 
下面是一個迴圈，迴圈我們以前賦值的那個數組，然後是一個判斷，判斷挑出我們所屬這個大城市的小城市列表，這裡我們以前賦的那個大城市號就有用了，在這裡
就是判斷那個大城市號如果相等，則把哪個數組的值加到下拉式清單二中。

三.事件的觸發。

   
以上兩節講的是js的事件，和小城市的js數組的定義，下面說一下這個事件的調用，首先，我們要在頁面上放兩個下拉式清單，一個是大城市列表，一個是小城市
列表，代碼如下：

<%
set
ItemRs=server.CreateObject("adodb.recordset")
ItemSql="select * from
BCity"
ItemRs.open ItemSql,conn,1,3
if ItemRs.eof and ItemRs.bof then  

Response.Write("暫無資訊")
else
Response.Write("<select
name=""SelectItem"" onChange=""ClassChange(this.value)""

style=""width:80px;"">")
Response.Write("<option
value=""0"" selected>選擇大類</option>")
do while not
ItemRs.eof
%>
<option
value="<%=ItemRs("BCityId")%>"><%=ItemRs("BCityName")%></option>
<%
ItemRs.movenext                                                                                    

      
loop  

Response.Write("</select>")                                                              

ItemRs.close                                                                                   

         
set
ItemRs=nothing                                                                             

               
end
if
%>
<select name="SelectClass" style="width:80px;
">
</select>

代碼講解：

    這段代碼相對就簡單多了，調出大城市的資料，然後迴圈放到一個下拉式清單中，事件
onChange是用來在值變化時觸發事件，並將大城市的編號轉入方法，然後由方法完成將小類展示在第二個列表裡。

總結

   
上學的時候感覺這些代碼真的好複雜，用的真高深，現在研究起來，感覺好簡單，因為你看到過更高深的代碼，因為你的知識在進步，雖然網上也有了很多這樣的文
章，我還是要整理一篇出來，因為我感覺他們講解的都不夠好，做為一個初學者來說，如果沒有很好的講解是難理解的，雖然我感覺很簡單，這也正應了那句話：
“會者不難，難者不會”。好了，今天就寫到這裡吧，如果你在這裡獲得了協助，不要忘了留個言謝謝我。:)

著作權 天道酬勤  
2009.2.9