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

來源:互聯網
上載者:User
菜單|聯動菜單

    這個問題其實已經蠻老了,不過作為剛學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 江蘇省 

        以下省名略。

        設計思想: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>     

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



相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。