三级联动 的效果图

html页面:

<body>

    <label class="fl">区域：</label>

    <select class="fl selectShort" id="sltProvince">

        <option value="0">--省--</option>

    </select>

    <select class="fl selectShort" id="sltCity">

        <option value="0">--市--</option>

    </select>

    <select class="fl selectShort" id="sltDistrict">

        <option value="0">--区县--</option>

    </select>

    <div class="clear"></div>

</body>

JS

$(document).ready(function () {

    //加载省

    BindProvince();

    //加载市

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

        ProvinceChange();

    });

    //加载区县

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

        CityChange();

    });

});

function BindProvince() {

    $.get("/CityAjax.ashx?OType=3&RandomNum=" + parseInt(Math.random() * ), function (data) {

        if (data != "") {

            $("#sltProvince").html("").html("<option value='0'>- 请选择省 -</option>");

            $("#sltProvince").append(data);

        }

    });

}

//市

function ProvinceChange() {

    $.ajax({

        type: "Post",

        url: "/CityAjax.ashx?OType=1&PID=" + $("#sltProvince").val(),

        async: false,

        dataType: 'html',

        success: function (result) {

            $("#sltCity").html("").html("<option value='0'>-- 请选择市 --</option>");

            $("#sltDistrict").html("").html("<option value='0'>-- 请选择区县 --</option>");

            $("#sltCity").append(result);

        }

    });

}

//县

function CityChange() {

    $.ajax({

        type: "Post",

        url: "/CityAjax.ashx?OType=2&CID=" + $("#sltCity").val(),

        async: false,

        dataType: 'html',

        success: function (result) {

            $("#sltDistrict").html("").html("<option value='0'>-- 请选择区县 --</option>");

            $("#sltDistrict").append(result);

        }

    });

}

一般处理程序:

    public class CityAjax : IHttpHandler

    {

        public void ProcessRequest(HttpContext context)

        {

            context.Response.ContentType = "text/plain";

            string OType = context.Request.QueryString["OType"];

            string PID = string.IsNullOrEmpty(context.Request.QueryString["PID"]) ? "" : context.Request.QueryString["PID"]; //省ID

            string CID = string.IsNullOrEmpty(context.Request.QueryString["CID"]) ? "" : context.Request.QueryString["CID"];//时ID

            string DID = string.IsNullOrEmpty(context.Request.QueryString["DID"]) ? "" : context.Request.QueryString["DID"]; //区县ID

            string RtnString = "";

            switch (OType)

            {

                case "":

                    List<Province_City_District.Models.CityNew> CList = AreaDal.GetAllCityList();   //获取所有的市

                    var CityItems = from c in CList where c.ProvinceID.ToString() == PID select c;

                    foreach (var item in CityItems)

                    {

                        RtnString += "<option value='" + item.id + "'>" + item.CityName + "</option>";

                    }

                    break;

                case "":

                    List<Province_City_District.Models.DistrictNew> DList = AreaDal.GetAllDistrictList(); //获取所有的区县

                    var DistrictItems = from c in DList where c.CityID.ToString() == CID select c;

                    foreach (var item in DistrictItems)

                    {

                        RtnString += "<option value='" + item.ID + "'>" + item.DistrictName + "</option>";

                    }

                    break;

                case "":

                    List<Province_City_District.Models.ProvinceNew> PList = AreaDal.GetAllProvinceList(); //获取所有的省

                    foreach (var item in PList)

                    {

                        RtnString += "<option value='" + item.ID + "'>" + item.ProvinceName + "</option>";

                    }

                    break;

            }

            context.Response.Write(RtnString);

        }

        public bool IsReusable

        {

            get

            {

                return false;

            }

        }

    }

[Ajax三级联动 无刷新]的更多相关文章

  1. MVC三级联动无刷新

    本篇实现有关客户.订单和产品的无刷新三级联动,先看最终效果: 没有选择时,后2个Select状态为禁用: 当选择第1个Select,第2个Select可供选择,第3个Select依旧禁用: 当选择第2 ...

  2. 使用 AJAX + 三级联动 实现分类出全国各地的省，市，区

    使用AJAX + 三级联动  实现分类出全国各地的省,市,区 也可以将下面的显示页面所写的 function循环,封装成js文件,就是在写代码软件里创建一个js文件,就和创建一个HTML或php文件一 ...

  3. nodejs利用ajax实现网页无刷新上传图片

    nodejs利用ajax实现网页无刷新上传图片 标签(空格分隔): nodejs 通常情况下上传图片是要通过提交form表单来实现的,但是这又不可避免的产生了网页转. 利用ajax技术和FormDat ...

  4. ajax验证表单元素规范正确与否 ajax展示加载数据库数据 ajax三级联动

    一.ajax验证表单元素规范正确与否 以用ajax来验证用户名是否被占用为例 1创建表单元素<input type="text" id="t"> 2 ...

  5. 本篇文章主要是对jquery+ajax+C#实现无刷新操作数据库数据的简单实例进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助

    我们知道同步执行和异步执行的区别,为了更好的提高用户的体验,我们都会采用异步方式去处理一些问题,毕竟单线程的同步可能回造成卡死等现象,很不友好,所以可以使用ajax来完成用户的体验,现在我们就来说说如 ...

  6. ajax完成list无刷新返回

    ajax完成list无刷新返回 ajax无刷新技术总结,以下是一段我写的ajax应用的js脚本.其中提交的data刚开始我采用的是$('#formId').serialize();但是出现乱码问题,为 ...

  7. 菜鸟学Java（七）——Ajax+Servlet实现无刷新下拉联动

    下拉联动的功能可以说非常的常用,例如在选择省.市等信息的时候:或者在选择大类.小类的时候.总之,下拉联动很常用.今天就跟大家分享一个简单的二级下拉联动的功能. 大类下拉框:页面加载的时候就初始化大类的 ...

  8. AJAX 三级联动

    新的封装类 <?php class DBDA { public $host="localhost";//服务器地址 public $uid="root"; ...

  9. ajax三级联动下拉菜单

    ajax写三级联动,先写一个文件类吧,以后用的时候直接调用即可: 来找一张表: 实现: 中国地域的三级联动:省.市.区: 图: 说一下思路: (1)当用户选择省份的时候触发事件,把当前的省份的id通过 ...

随机推荐

  1. TCP坚持定时器

    窗口探查(window probe) 当接收方TCP缓冲区没有剩余空间后,在ACK中会通知发送方window=0,此时发送方就暂停发送数据.当接收方TCP缓冲区又有空间后,会再次发送一个ACK,告知其 ...

  2. 第八章· MySQL日志管理

    一.MySQL日志简介  二.错误日志 1.作用: 记录mysql数据库的一般状态信息及报错信息,是我们对于数据库常规报错处理的常用日志. 2.默认位置: $MYSQL_HOME/data/ 3.开 ...

  3. 《python解释器源码剖析》第2章--python中的int对象

    2.0 序 在所有的python内建对象中,整数对象是最简单的对象.从对python对象机制的剖析来看,整数对象是一个非常好的切入点.那么下面就开始剖析整数对象的实现机制 2.1 初识PyLongOb ...

  4. CentOS7.x卸载与安装MySQL5.7的操作过程以及编码格式的修改

    一.MySQL5.7的卸载 1.1yum方式查看yum是否安装过mysql cd yum list installed mysql* 如或显示了列表,说明系统中有MySQL 如上显示,我已经安装了my ...

  5. 延长zencart1.5.x后台的15分钟登录时间和取消90天强制更换密码

    延长zencart1.5.x后台的15分钟登录时间 打开includes\functions\sessions.php if (IS_ADMIN_FLAG === true) { if (!$SESS ...

  6. Lambda方法推导(method references)

    在上一篇[http://www.cnblogs.com/webor2006/p/7707281.html]中提到了方法推导的东东: 这里说细的学习一下它,下面走起! Method references ...

  7. LabVIEW中的波形图表（Chart）与波形图（Graph）

    在百度上随便找的一个简单的例子: 具体链接:https://jingyan.baidu.com/article/5552ef47deb996518ffbc983.html 波形图表最先出现数据,等待所 ...

  8. ubuntu设置窗口最大化

    三行命令搞定Ubuntu 16.04下安装VMware Tools!!!!!!!!! 由于下载的是ubuntu-16.04.3-desktop-amd64,需要安装vmware tools,以往提取的 ...

  9. node简单起服务

    1.建一个app.js文件 const http = require('http'); const chalk = require('chalk'); const conf = require('./ ...

  10. DOM 事件流与事件处理程序

    ㈠事件流 ▶事件:是文档和浏览器窗口中发生的,特定的交互瞬间. ▶事件流:描述的是从页面中接受事件的顺序   ⑴DOM事件冒泡 定义:事件最开始由最具体的元素(文档中嵌套层次最深的那个节点)接受,然后 ...