我的ASP之旅—二级联动菜单制作-ASP教程,ASP应用

 这个问题其实已经蛮老了，不过作为刚学asp3个月的我来说，还是有必要写下来强化自己的基础知识。

        就拿最常用的“省市下拉列表联动”作为例子吧！

        在我们制作网站会员注册信息时，一般会涉及到填写自己所在省/市，如果用input或textarea做成填写形式不太理想。所以大部分网站都会选择联动下来列表形式，做起来也不算很复杂，同时看上去也很轻松。

        具体做法如下：

        1.设计数据库

        我们选用access数据库。首先，新建名为database1.mdb的access数据库

        在database1.mdb数据库中建立两个表分别为province、city。具体字段设计如下：

        province(省)

        具体字段：id—自动编号 provincename—省名 provinceno—省名编号 provinceorder—省排序编号

        以下省名略。

        设计思想：id是表的自动编号，provincename和provinceno是必须的，前者是用来存储省名，后者则是联系表city必不可少的字段。至于provinceorder则是用来给省名排序的，控制下拉列表中省名出现的位置，可以省略。

        city(城市)

        具体字段：id—自动编号 cityname—市名 cityno—市名编号 cityorder—市排序编号 provinceid—所在省编号

          以下市名略。

          设计思想：前面四项同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>     

       至此，一个省市二级联动菜单程序便写好了。虽然代码不多，但反映的技术还是比较全面的。希望以后能多学点知识，写点更好的东东^_^