[Ajax三级联动无刷新]

三级联动的效果图

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>

$(document).ready(function () {

    //加载省
    BindProvince();
    //加载市
    $("#sltProvince").change(function () {
        ProvinceChange();
    });
    //加载区县
    $("#sltCity").change(function () {
        CityChange();
    }); 
});
 
function BindProvince() {
    $.get("/CityAjax.ashx?OType=3&RandomNum=" + parseInt(Math.random() * 100000), 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"]) ? "0" : context.Request.QueryString["PID"]; //省ID
            string CID = string.IsNullOrEmpty(context.Request.QueryString["CID"]) ? "0" : context.Request.QueryString["CID"];//时ID
            string DID = string.IsNullOrEmpty(context.Request.QueryString["DID"]) ? "0" : context.Request.QueryString["DID"]; //区县ID
            string RtnString = "";
          
            switch (OType)
            {
                case "1":
                    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 "2":
                    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 "3": 
                    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;
            }
        }
    }

相关阅读:
【洛谷P1558】色板游戏
 【SCOI2010】序列操作
 Windows下MySQL下载安装、配置与使用
 Redis和MySQL数据同步及Redis使用场景
 python的设计模式之MVC模式
 python 面试真题
 python调用C语言
 一次跨域请求出现 OPTIONS 请求的问题及解决方法
 服务器宕机问题
 页面静态化
原文地址：https://www.cnblogs.com/shaopang/p/6943468.html

[Ajax三级联动 无刷新]

[Ajax三级联动无刷新]