tnblog
首页
视频
资源
登录
愿你出走半生,归来仍是少年
排名
6
文章
6
粉丝
16
评论
8
{{item.articleTitle}}
{{item.blogName}} : {{item.content}}
ICP备案 :渝ICP备18016597号-1
网站信息:2018-2024TNBLOG.NET
技术交流:群号656732739
联系我们:contact@tnblog.net
公网安备:50010702506256
欢迎加群交流技术

AJAX三级联动

4693人阅读 2019/9/2 12:07 总访问:1940130 评论:0 收藏:0 手机
分类: JS相关


做好二级联动,三级联动几乎完全一样了

html:

省:<select id="provice">
</select>
市:<select id="city">
</select>

js:

$(function () {

    $.get('ProviceHandler.ashx', function (result) {
        //把json字符串反序列化成对象
        var jsonarray = JSON.parse(result);
        var proviceHtml = "";
        //遍历json对象
        for (var i = 0; i < jsonarray.length; i++) {
            var jsonobj = jsonarray[i];
            proviceHtml += "<option value='" + jsonobj.Id + "'>" + jsonobj.Name + "</option>";
        }
        $("#provice").html(proviceHtml);
        getcityByPId();
    });

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

        getcityByPId();
    });
});

var getcityByPId = function () {
    $.get('CityHandler.ashx', { pid: $("#provice").val() }, function (result) {
        var jsonarray = JSON.parse(result);
        var proviceHtml = "";
        for (var i = 0; i < jsonarray.length; i++) {
            var jsonobj = jsonarray[i];
            proviceHtml += "<option value='" + jsonobj.Id + "'>" + jsonobj.Name + "</option>";
        }
        $("#city").html(proviceHtml);
    });
}

ProviceHandler.ashx

public class ProviceHandler : IHttpHandler
{

    public void ProcessRequest(HttpContext context)
    {
        context.Response.ContentType = "text/plain";
        ProviceCityDAL proviceCityDAL = new ProviceCityDAL();
        List<Provice> proviceList = proviceCityDAL.GetProvices();
        JavaScriptSerializer jss = new JavaScriptSerializer();
        string jsonstr = jss.Serialize(proviceList);
        context.Response.Write(jsonstr);
    }

    public bool IsReusable
    {
        get
        {
            return false;
        }
    }
}

CityHandler.ashx:

public class CityHandler : IHttpHandler
{

    public void ProcessRequest(HttpContext context)
    {
        context.Response.ContentType = "text/plain";
        ProviceCityDAL proviceCityDAL = new ProviceCityDAL();
        string pidstr = context.Request["pid"];
        if (string.IsNullOrWhiteSpace(pidstr))
        {
            context.Response.Write(-1);
            return;
        }

        int pid = Convert.ToInt32(pidstr);
        List<City> cityList = proviceCityDAL.GetCitysByPId(pid);
        JavaScriptSerializer jss = new JavaScriptSerializer();
        string jsonstr = jss.Serialize(cityList);
        context.Response.Write(jsonstr);
    }

    public bool IsReusable
    {
        get
        {
            return false;
        }
    }
}



欢迎加群讨论技术,群:677373950(满了,可以加,但通过不了),2群:656732739

评价