[Ajax三级联动 无刷新]

时间：2023-03-08 17:46:32

三级联动 的效果图

[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>

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;

            }

        }

    }

相关文章