我的ASP之旅—二級聯動菜單製作

菜單|聯動菜單|菜單|聯動菜單  這個問題其實已經蠻老了，不過作為剛學ASP3個月的我來說，還是有必要寫下來強化自己的基礎知識。

        就拿最常用的“省市下拉式清單聯動”作為例子吧！

        在我們製作網站會員註冊資訊時，一般會涉及到填寫自己所在省/市，如果用input或textarea做成填寫形式不太理想。所以大部分網站都會選擇聯動下來列表形式，做起來也不算很複雜，同時看上去也很輕鬆。

        具體做法如下：

        1.設計資料庫

        我們選用Access資料庫。首先，建立名為database1.mdb的Access資料庫

        在database1.mdb資料庫中建立兩個表分別為province、city。具體欄位設計如下：

        Province(省)

        具體欄位：id—自動編號 ProvinceName—省名 ProvinceNo—省名編號 ProvinceOrder—省排序編號

省 idProvinceNameProvinceNo ProvinceOrder  1 北京市00 2 安徽省11 3 山東省22 4江蘇省 3 3 

        以下省名略。

        設計思想：id是表的自動編號，ProvinceName和ProvinceNo是必須的，前者是用來儲存省名，後者則是聯絡表city必不可少的欄位。至於ProvinceOrder則是用來給省名排序的，控制下拉式清單中省名出現的位置，可以省略。

        City(城市)

        具體欄位：id—自動編號 CityName—市名 CityNo—市名編號 CityOrder—市排序編號 ProvinceID—所在省編號

市

id

 CityName

 CityNo

CityOrder 

ProvinceID 

 1

北京市

1

 1

0

 2

 合肥市

2

2

1

 3

 蕪湖市

3

3

1

 4

 安慶市

 4

 4

 1

 5

 濟南市

 5

 5

 2

 6

 青島市

 6

 6

 2

          以下市名略。

          設計思想：前面四項同Province表設計思想，ProvinceID欄位將Province表和City表聯絡起來。

          2.設計樣式及編碼

         二級聯動的樣式很簡單，在DreamWeaver 2004裡向設計頁面上放置兩個select下拉式功能表，分別取名為Province_select、City_select，它們都在名為form1的表單裡。

         編碼需要用到html、vbscript及javascript。首先是串連資料庫，我們用常用的<!--#include file="conn.asp"-->串連。conn.asp中代碼略。

        其次，用Javascript和Vbscript將Province和City表中的資料讀出來並使Province_select和City_select聯絡起來，這一步是整個程式的關鍵所在。
        代碼如下：

         <script language=JavaScript>
         <%
         dim sql,i,j
         '//////////////////////////讀出 Province 表//////////////////////////
         set rs_Province=server.createobject("adodb.recordset")
         sql="select * from Province order by ProvinceOrder"
         rs_Province.open sql,conn,1,1
         %>

         var selects=[];
         selects['xxx']=new Array(new Option('請選擇城