一個很好的JS,ASP二級下拉框聯動。

在咱們製做網站會員註冊信息時，通常會涉及到填寫本身所在省/市，若是用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>     

       至此，一個省市二級聯動菜單程序便寫好了。雖然代碼很少，但反映的技術仍是比較全面的。