在我们制作网站会员注册信息时,一般会涉及到填写自己所在省/市,如果用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>

至此,一个省市二级联动菜单程序便写好了。虽然代码不多,但反映的技术还是比较全面的。

一个很好的JS,ASP二级下拉框联动。的更多相关文章

  1. ajax技术实现登录判断用户名是否重复以及利用xml实现二级下拉框联动,还有从数据库中获得

    今天学了ajax技术,特地在此写下来作为复习. 一.什么是ajax? 客户端(特指PC浏览器)与服务器,可以在[不必刷新整个浏览器]的情况下,与服务器进行异步通讯的技术  即,AJAX是一个[局部刷新 ...

  2. SSM框架,在Html界面利用ajax,json,jQuery实现省市区下拉框联动

    1.先生成省市区表格 2.建立实体类 3.在html画出下拉框 <select id="province"> <option value="" ...

  3. 基于bootstrap-multiselect.js的下拉框联动

    背景:当option特别多时,一般的下拉框选择起来就有点力不从心了,所以使用multiselect是个很好的选择,可以通过输入文字来选择选项很方便,但是有一个需要下拉框联动,网上找了半天才找到解决方法 ...

  4. bootstrap-multiselect.js多选下拉框初始化时默认选中初始值

    bootstrap-multiselect.js多选下拉框默认值设置 一.案例数据格式  二.HTML代码 <select id="msgRoles" multiple=&q ...

  5. MVC 下拉框联动效果(单选)

    下拉框联动效果,我们以部门--职位为例,选择部门时,关联到该部门的职位.下拉框的写法就不多说了,详细请参照前文. 视图: 其中,dept是部门的属性,deptlist是部门下拉框的属性,job是职位的 ...

  6. Ajax jQuery下拉框联动案例

    需求: 使用ajax和jQuery实现下拉框联动. 注意:需要加入jquery-2.1.1.min.js 前台 <!DOCTYPE html> <html> <head& ...

  7. jQuery Ajax MVC 下拉框联动

    无刷新下拉框联动方法: Controllers代码 public JsonResult DH_Change(string DH_ID) { List<SelectListItem> Tea ...

  8. Java Swing应用程序 JComboBox下拉框联动查询

    在web项目中,通过下拉框.JQuery和ajax可以实现下拉框联动查询. 譬如说,当你查询某个地方时,页面上有:省份:<下拉框省份> 市区:<下拉框市区> 县乡:<下拉 ...

  9. C# 生成月份及天选择列表,方便做下拉框联动

    月份及天选择列表,很方便做下拉框联动 /// <summary> /// 获取月份选择列表(根据当前语言环境显示月份名称) /// </summary> private IEn ...

随机推荐

  1. 转载 - KMP算法

    出处:http://www.cnblogs.com/dolphin0520/archive/2011/08/24/2151846.html KMP算法 在介绍KMP算法之前,先介绍一下BF算法. 一. ...

  2. K - Transformation

    K - Transformation HDU - 4578 思路:发现自己的错误竟然是zz般的少了一个取模   ε=ε=ε=(#>д<)ノ #include<cstdio> # ...

  3. Spring Boot项目@RestController使用重定向redirect

    Spring MVC项目中页面重定向一般使用return "redirect:/other/controller/";即可.而Spring Boot使用了@RestControll ...

  4. Spring注解@Repository、@Service、@Controller、@Component

    继前几章所讲解的注解中: http://www.cnblogs.com/EasonJim/p/6892280.html http://www.cnblogs.com/EasonJim/p/689974 ...

  5. jplogic v1.0案例开发之知识库管理(文档管理等)(二)

    jplogic v1.0开发陆续更新,意在和广大网友分享交流.通过寻求合作伙伴,交流群.以下是jplogic的关于知识库模块的部分功能,例如以下进行功能展示: 知识库主界面: 新增知识类别: wate ...

  6. TI C66x DSP 系统events及其应用 - 5.6(INTMUX)

    系统event 0~127(包含了eventCombiner的输出event 0~3)与CPU支持的12个可屏蔽中断是通过INTMUX寄存器进行映射的(不包含NMI.RESET).能够选择将系统eve ...

  7. Flip Game(枚举)Poj

     Flip Game Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 31329   Accepted: 13622 De ...

  8. org.openqa.selenium.NoSuchElementException:

    http://www.blogjava.net/qileilove/archive/2014/12/11/421309.html selenium webdriver定位不到元素的五种原因及解决办法 ...

  9. 问题3-Error occurred during initialization of VM Could not reserve enough space for object heap

    初步断定是内存方面的问题 于是决定修改配置文件 D:\study\eclipse\eclipse\eclipse.ini -startupplugins/org.eclipse.equinox.lau ...

  10. java学习笔记(二)图形用户接口

    这个学期主要放在ACM比赛上去了,比赛结束了.不知不觉就15周了,这周就要java考试了,复习一下java吧.java的学习的目的还是让我们学以致用,让我们可以运用java开发一下小项目.而不是单单应 ...