[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() * 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; } } }
不要总是说的很多,却做得很少!
要明白'生于忧患,死于安乐'!