风清月

AJAX三级联动

电脑版发表于:2019/9/2 12:07


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

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;
        }
    }
}



关于TNBLOG
TNBLOG,技术分享。技术交流:群号677373950
ICP备案 :渝ICP备18016597号-1
App store Android
精彩评论
{{item.replyName}}
{{item.content}}
{{item.time}}
{{subpj.replyName}}
@{{subpj.beReplyName}}{{subpj.content}}
{{subpj.time}}
猜你喜欢