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

菜單|聯動菜單

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

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

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

        具體做法如下：

        1.設計資料庫

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

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

        Province(省)

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

省

id	ProvinceName	ProvinceNo	ProvinceOrder
1	北京市	0	0
2	安徽省	1	1
3	山東省	2	2
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('請選擇城市……','xxx'));

         <%
         for i=1 to rs_s.recordcount
         %>
         

        selects['<%=rs_Province("ProvinceNo")%>']=new Array(
        <%
        '//////////////////////////讀出 City 表//////////////////////////
        set rs_City=server.createobject("adodb.recordset")
        sql="select * from City where ProvinceID="&rs_Province("id")&" order by ProvinceOrder"
        rs_City.open sql,conn,1,1
        if rs_City.recordcount>0 then
           for j=1 to rs_City.recordcount
              if j=rs_City.recordcount then
        %>
      

        new Option('<%=trim(rs_City("CityName"))%>','<%=trim(rs_City("CityNo"))%>'));

        <%else%>
  

        new Option('<%=trim(rs_City("Cityname"))%>','<%=trim(rs_City("CityNo"))%>'),

        <%
        end if
        rs_City.movenext
        next
        else
        %>
        new Option('','0'));
      

        <%
        end if
        rs_City.close
        set rs_City=nothing
        rs_Province.movenext
        next
        rs_Province.close
        set rs_Province=nothing
       %>
 

      <!--//////////JavaScript控制聯動///////////-->
      function chsel(){
         with (document.form1){
           if(province_select.value) {
                city_select.options.length=0;
                for(var i=0;i<selects[province_select.value].length;i++){
                     city_select.add(selects[province_select.value][i]);
    }
   }
  }
 }

</script>

        最後，結合html，Javascript和Vbscript實現聯動效果。代碼如下：

        <!--//////////////////////////Province_select下拉式清單//////////////////////////--> 
        <select name="Province_select" onChange=chsel()> 
        <option value="xxx" selected>請選擇省份……</option>
         <%
          dim tmpid  '定義一個臨時變數用來記住省id
          tmpid=0
         
          set rs_Province=server.CreateObject("ADODB.recordset")
          sql="select * from Province order by ProvinceOrder"
          rs_Province.open sql,conn,1,1
          while not rs_Province.eof 
          tmpid=rs_Province("id")
          %>
            <option value="<%=rs_Province("ProvinceNo")%>" ><%=trim(rs_Province("ProvinceName"))%></option>
         <%
          rs_Province.movenext
          wend
          rs_Province.close
          set rs_Province=nothing
         %> 
         </select> 

        <!--//////////////////////////City_select下拉式清單//////////////////////////-->  
         <select name="City_select">
         <%
         set rs_City=server.createobject("adodb.recordset")
         sql="select * from City where ProvinceID="&tmpid&" order by CityOrder"
         rs_City.open sql,conn,1,1
         while not rs_City.eof
         %>
          <option value="<%=rs_City("CityNo")%>"><%=trim(rs_City("CityName"))%></option>
         <%
         rs_City.movenext
         wend
         rs_City.close
         set rs_City=nothing
        %>
        </select>     

       至此，一個省市二級聯動菜單程式便寫好了。雖然代碼不多，但反映的技術還是比較全面的。希望以後能多學點知識，寫點更好的東東^_^