用到了地区的数据库

html代码：

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

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

    <title></title>

    <script src="script/jquery-1.7.1.js"></script>

    <script language="javascript">

        $(document).ready(function () {

            fillProv();//加载省份,加载省份的函数中调用了加载城市的函数，记载城市的函数调用了加载县市区的函数（为了防止异步传输页面加载不出东西）

            //添加事件

            //给省份添加事件

            $("#ddlProv").change(function () {

                fillCity();

            });//change

            $("#ddlCity").change(function () {

                fillCountry();

            });//change

        });//ready

        function fillProv() {

            $.ajax({

                url: "LianDong.ashx",

                data: { parent: "0001" },

                type: "POST",

                dataType: "XML",

                success: function (data) {

                    //解析XML

                    $("#ddlProv").empty();//加载之前清空下拉

                    var arr = $(data).find("item");

                    for (var i = 0; i < arr.length; i++) {

                        var code = arr.eq(i).attr("code");

                        var name = arr.eq(i).attr("name");

                        //显示HTML

                        //var op = "<option value='" + code + "'>" + name + "</option>";

                        $("#ddlProv").append("<option value='" + code + "'>" + name + "</option>");

                    };//for

                    fillCity();

                }//success

            });//ajax

        }

            function fillCity()

            {

                var parent=$("#ddlProv").val();

                $.ajax({

                    url: "LianDong.ashx",

                    data: { parent: parent },

                    type: "POST",

                    dataType: "XML",

                    success: function (data)

                    {

                        $("#ddlCity").empty();//加载之前清空下拉

                        //解析

                        var arr = $(data).find("item");

                        for (var i = 0; i < arr.length; i++) {

                            var code = arr.eq(i).attr("code");

                            var name = arr.eq(i).attr("name");

                            //显示HTML

                            $("#ddlCity").append("<option value='" + code + "'>" + name + "</option>");

                        }//for

                        fillCountry();

                    }//success

                });//ajax

            }

            function fillCountry()

            {

                var parent = $("#ddlCity").val();

                $.ajax({

                    url: "LianDong.ashx",

                    data: { parent: parent },

                    type: "POST",

                    dataType: "XML",

                    success: function (data)

                    {

                        $("#ddlCountry").empty();//加载之前清空下拉

                        //解析

                        var arr = $(data).find("item");

                        for (var i = 0; i < arr.length; i++) {

                            var code = arr.eq(i).attr("code");

                            var name = arr.eq(i).attr("name");

                            //显示

                            $("#ddlCountry").append("<option value='" + code + "'>" + name + "</option>");

                        }

                    }//success

                });//ajax

            }

    </script>

</head>

<body>

    <form id="form1" runat="server">

        <div>

            <asp:DropDownList ID="ddlProv" runat="server"></asp:DropDownList>

            <asp:DropDownList ID="ddlCity" runat="server"></asp:DropDownList>

            <asp:DropDownList ID="ddlCountry" runat="server"></asp:DropDownList>

        </div>

    </form>

</body>

</html>

服务端代码：

public class LianDong : IHttpHandler {

    private MyDBDataContext _Context = new MyDBDataContext();

    public void ProcessRequest (HttpContext context) {

        //获取请求过来的值

        var s = context.Request["parent"];

        StringBuilder sb = new StringBuilder();//命名空间using System.Text;

        string rel = null;

        //根据请求过来的值查询相应的数据

        var query = this._Context.ChinaStates.Where(r => r.ParentAreaCode == s);

        if (query.Count()>)

        {

            foreach (ChinaStates data in query)

            {

                sb.Append("<item code='" + data.AreaCode + "' name='" + data.AreaName + "'/>");

            }

        }

        //回发xml

        rel = sb.ToString();

        context.Response.Write("<?xml version='1.0'?>");

        context.Response.Write("<root>");

        context.Response.Write(rel);

        context.Response.Write("</root>");

        context.Response.End();

    }

Ajax实现联动效果的更多相关文章

  1. asp.net DropDownList无刷新ajax二级联动实现详细过程

    只适合新手制作DropDownList无刷新ajax二级联动效果: 数据库实现,添加两表如图:表1,pingpai,表2,type,具体数据库实现看自己的理解: //页面主要代码: <asp:S ...

  2. Json 基于jQuery+JSON的省市联动效果

    helloweba.com 作者:月光光 时间:2012-09-12 21:57 标签: jQuery  JSON  Ajax  省市联动     省市区联动下拉效果在WEB中应用非常广泛,尤其在一些 ...

  3. html + ashx 实现Ajax省市联动

    基本思路:1.了解数据库中省和市的表结构及关联主键 2.创建html页面及select标签 3.通过ajax向ashx(一般处理程序)发送后台请求完成联动效果 表结构: 这里,开始创建一个命为demo ...

  4. jquery.cityselect.js基于jQuery+JSON的省市或自定义联动效果

    一.插件介绍 最早做省市联动的时候都特别麻烦,后来在helloweba的一篇文章中看到这个插件,很不错的,后来就一直用了. 省市区联动下拉效果在WEB中应用非常广泛,尤其在一些会员信息系统.电商网站最 ...

  5. Asp.Net下，基于Jquery的Ajax二级联动

    最近做一个项目,要求实现二级联动效果.背景为:通过学院的选择,联动出专业选项.起初想直接用微软的控件实现Ajax效果,但是DropDownList控件会自动触发PostBack,在后台根本就不好控制, ...

  6. JS省市区联动效果

    省市区联动下拉效果在WEB中应用非常广泛,尤其在电商网站最为常见.一般使用Ajax实现无刷新下拉联动.利用jQuery,通过读取JSON数据,实现无刷新动态下拉省市二(三)级联动效果. 首先我们可以看 ...

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

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

  8. 基于jQuery+JSON的省市县 二级 三级 联动效果

    省市区联动下拉效果在WEB中应用非常广泛,尤其在一些会员信息系统.电商网站最为常见.开发者一般使用Ajax实现无刷新下拉联动.本文将讲述,利用jQuery插件,通过读取JSON数据,实现无刷新动态下拉 ...

  9. 基于jQuery+JSON的省市联动效果

    省市区联动下拉效果在WEB应用中使用非常广泛,尤其在一些会员信息系统.电商网站最为常见,开发者一般使用AJAX实现无刷新下拉联动. 本文将讲述利用jQuery插件,通过读取JSON数据,实现无刷新动态 ...

随机推荐

  1. 【实践】jdbc批量插入数据

    参考文献:http://my.oschina.net/u/1452675/blog/203670 http://superjavason.iteye.com/blog/255423 /*测试批量写入数 ...

  2. Codeforces Round #275 Div.1 B Interesting Array --线段树

    题意: 构造一个序列,满足m个形如:[l,r,c] 的条件. [l,r,c]表示[l,r]中的元素按位与(&)的和为c. 解法: 线段树维护,sum[rt]表示要满足到现在为止的条件时该子树的 ...

  3. Python-装饰器详解

    初学python,装饰器是什么玩意儿? 1:装饰器是函数,只不过该函数可以具有特殊的含义,装饰器用来装饰函数或类,使用装饰器可以在函数执行前和执行后添加相应操作. 2:至少两层函数 方式一: 理解方式 ...

  4. Jython概要

    1.安装jython 1.1 进入http://www.jython.org/downloads.html ,网页上会显示当前最稳定的版本(The most current stable releas ...

  5. 05JavaIO详解_仿照IO源码自己去实现一个IO流（为了加深印象，本身没有价值）

    版本会越来越难: 版本1:只写一个read方法 package com.guigu.shen.InputStream; import java.io.IOException; import java. ...

  6. 基于.NET平台常用的框架整理 (转）

    http://www.cnblogs.com/hgmyz/p/5313983.html 自从学习.NET以来,优雅的编程风格,极度简单的可扩展性,足够强大开发工具,极小的学习曲线,让我对这个平台产生了 ...

  7. 学习Shell脚本编程（目录）

    所涉及的内容如下: Shell命令行的运行 编写.修改权限和执行Shell程序的步骤 在Shell程序中使用参数和变量 表达式比较.循环结构语句和条件结构语句 在Shell程序中使用函数和调用其他Sh ...

  8. Java系列：《Java核心技术 卷一》学习笔记，cchapter11 异常

    11.1.1 异常分类     如果一个程序出现了RuntimeException,那么就一定是你的问题. 11.1.2 声明已检测异常     如果子类覆盖了父类的一个方法,那么子类方法中声明的检查 ...

  9. LeetCode:Word Break II（DP）

    题目地址:请戳我 这一题在leetcode前面一道题word break 的基础上用数组保存前驱路径,然后在前驱路径上用DFS可以构造所有解.但是要注意的是动态规划中要去掉前一道题的一些约束条件(具体 ...

  10. 20155224聂小益 - 我的技能与C语言学习

    20155224聂小益 - 我的技能与C语言学习 预备作业2 ● 你有什么技能比大多人(超过90%以上)更好? 我认为我可能有些技能身边有的人比较少有,但是要是超过90%以上我实在不敢保证.毕竟厉害的 ...