利用ASP嵌套JS+SQL Server打造两级连动下拉框

80酷酷网    80kuku.com

  js|server|sql|下拉

随着网络技术的迅速发展,越来越多的电子商务网站也应运而生。而在构建一个功能强大的电子商务网站往往少不了提供网上注册功能给客户自行注册这个模块,为了尽可能方便客户填写信息,我们经常要用到下拉框供客户选择,特别是两级连动下拉框最为常用。

再说,本人今日发现CSDN论坛上也经常有网友提问这个问题,就是,需要一个两级连动下拉框,第一个显示省份名称,第二个显示相应的城市名。为了解答这个问题,我特别写这篇文章,希望能对需要这方面资料的网友有所帮助。

首先,我们先来设计数据库(SQL Server 7.0)

●     数据库名:DB_ProvinceCat

●     表名:1)Tb_Province     2)Tb_City

说明:表Tb_Province用来存放省份名称;表Tb_City用来存放相应的城市名称。

●     字段名的设计

1)  表Tb_Province的字段有省份ID号(ProvinceCatID)、省份代码(ProvinceCode)、省份名称(ProvinceName),表1给出了示例:

ProvinceCatID    ProvinceCode     ProvinceName

1                 01          北京市

2                 02          上海市

3                 03          天津市

4                 04          重庆市

5                 05          广东省

6                 06          浙江省

7                 07          福建省

8                 08          海南省

9                 09          江苏省

表1

2)  表Tb_City的字段有城市ID号(CityID)、城市代码(CityCode)、城市名称(CityName),表2给出了示例:

CityID      CityCode     CityName

1           01001       北京市

2           02001       上海市

3           03001       天津市

4           04001       重庆市

5           05001       广州市

6           05002       深圳市

7           05003       珠海市

8           05004       茂名市

9           05005       中山市

10          06001       杭州市

11          06002       温州市

12          07001       福州市

13          07002       厦门市

14          08001       海口市

15          08002       三亚市

16          08003       万宁市

17          08004       五指山市

18          09001       南京市

19          09002       苏州市

表2

说明:这里要注意的一点就是,身份代码要对应城市代码的头两位。

其次,写代码。下面是一个完整的源代码:

TwoLevel.asp

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<meta name="GENERATOR" content="Microsoft FrontPage 4.0">

<meta name="ProgId" content="FrontPage.Editor.Document">

<title>下拉列表示例</title>

</head>

     

 <%

      dim conn  

      dim connstr

      on error resume next

      set conn=server.CreateObject("ADODB.connection")

      connstr="driver={SQL Server};server=wen;uid=sa;pwd=;database=DB_ProvinceCat"

      conn.Open connstr

    

      set Rs=server.createobject("ADODB.recordset")

      Rs.CursorLocation = adUseClient 

      SQL="Select * from Tb_Province"

      Rs.open SQL,conn,1,1

      if Not Rs.Eof then

          Dim strJScript

          strJScript=""

          Response.Write("<SCRIPT language=JavaScript>")&chr(13)

          Response.Write("function setcategory(S){")&chr(13)

          Response.Write("S.category.length="+Cstr(Rs.Recordcount+1)+";")&chr(13)

          dim i

          i=0

          While Not Rs.Eof

               strJScript=strJScript+"S.category.options["+CStr(i)+"].value="+chr(34)+Trim(Rs("ProvinceCode"))+chr(34)+";"+chr(13)

               strJScript=strJScript+"S.category.options["+CStr(i)+"].text="+chr(34)+Trim(Rs("ProvinceName"))+chr(34)+";"+chr(13)

                 i=i+1

             Rs.MoveNext

         Wend

             Response.write(strJScript)

             Response.Write("S.category.options["+CStr(i)+"].value="+chr(34)+"无"+chr(34)+";"+chr(13))

             Response.Write("S.category.options["+CStr(i)+"].text="+chr(34)+"**请选择省份**"+chr(34)+";"+chr(13))

             Response.Write("S.category.options["+Cstr(i)+"].selected=true;"+chr(13))

             Response.Write("}")&chr(13)

             Rs.Close

             Set Rs=Nothing

      end if

      set Rs=server.createobject("ADODB.recordset")

      Rs.CursorLocation = adUseClient

      SQL="Select Num=Count(*),Tb_Province.ProvinceCode From Tb_Province,Tb_City where Tb_Province.ProvinceCode=substring(Tb_City.CityCode,1,2)  group by Tb_Province.ProvinceCode order by Tb_Province.ProvinceCode"

      Rs.open SQL,conn,1,1

      if Not Rs.Eof then

        

          dim Num(30),j

          j=0

              Do While Not Rs.Eof

                  Num(j)=Rs("Num")

                  j=j+1

                  Rs.MoveNext

              Loop

      end if

      Rs.Close

      set Rs=Nothing

      SQL=""

      set Rs=server.createobject("ADODB.recordset")

      Rs.CursorLocation = adUseClient

      SQL="Select Tb_Province.*,Tb_City.* From Tb_Province,Tb_City where Tb_Province.ProvinceCode=substring(Tb_City.CityCode,1,2) order by Tb_Province.ProvinceCode"

      Rs.open SQL,conn,1,1

      j=0

      if Not Rs.Eof then

          Response.Write("function setsmall_cat(D){")&chr(13)

          Response.Write("var valuecategory=D.category.options[D.category.selectedIndex].value;")&chr(13)

          Response.write("if(valuecategory.indexOf("+chr(34)+"无"+chr(34)+")==0){"+chr(13)&_

                             "D.small_cat.length=1;"&_

                             "D.small_cat.options[0].value="+chr(34)+"无"+chr(34)+";"+chr(13)&_

                             "D.small_cat.options[0].text="+chr(34)+"**请选择城市**"+chr(34)+chr(13)&_

                             "D.small_cat.options[0].selected=true;"+chr(13)&_

                              "}")

                             

          i=0

          dim NextLevel,UpCatCode,overflow

          NextLevel="N"

          overflow="N"

          strJScript=""

        Do While Not Rs.Eof

            UpcateCode=Trim(Rs("ProvinceCode")) 

            if  NextLevel="N" then

              strJScript="else if(valuecategory.indexOf("+chr(34)+UpcateCode+chr(34)+")==0){"+chr(13)

              strJScript=strJScript+"D.small_cat.length="+Cstr(Num(j))+";"+chr(13)

              j=j+1

              NextLevel="Y"

           end if    

              strJScript=strJScript+"D.small_cat.options["+CStr(i)+"].value="+chr(34)+Trim(Rs("CityCode"))+chr(34)+";"+chr(13)

               strJScript=strJScript+"D.small_cat.options["+CStr(i)+"].text="+chr(34)+Trim(Rs("CityName"))+chr(34)+";"+chr(13)

            

              i=i+1

           

           Rs.MoveNext

          

           if UpcateCode<>Trim(Rs("ProvinceCode")) then

                overflow="Y"

           end if

   

           if  overflow="Y" then

                Response.write(strJScript+"}")

                 strJScript=""

                 overflow="N"

                 NextLevel="N"

                 i=0

            end if

         Loop

            

             Response.Write("}</Script>")&chr(13)

             Rs.Close

             Set Rs=Nothing

      end if

    Conn.close

    set conn=nothing

%>

   

<body onload=setcategory(document.select);setsmall_cat(document.select)>

<Form name="select" method="POST" action="#">

<center>

<Table>

<TR>                                                                               <td>请选择:</td>

 <TD><SELECT  onchange=setsmall_cat(document.select) name=category size="1" ></SELECT> <SELECT  name=small_cat size="1" ></SELECT> </TD>

</TR>

</Table></center>

</Form>

</body>

</html>

第三,进行代码调试。

本程序在WIN2000+IIS+SQL Server7.0环境下调试通过。

分享到
  • 微信分享
  • 新浪微博
  • QQ好友
  • QQ空间
点击: