JQuery+Ajax制作省市联动
Posted tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JQuery+Ajax制作省市联动相关的知识，希望对你有一定的参考价值。
1 $(document).ready(function () { 2 $("#Province").append("<option value=‘‘>" + "--请选择--" + "</option>"); 3 $("#City").append("<option value=‘‘>" + "--请选择--" + "</option>"); 4 $("#District").append("<option value=‘‘>" + "--请选择--" + "</option>"); 5 $.ajax({ 6 url: "Handler1.ashx?type=0", //路径 地址 7 type: "get", //类型，post\get 8 dataType: "json", //json数据 9 success: function (msg) {//返回结果 10 for (var i = 0; i < msg.length; i++) { 11 $("#Province").append("<option value=‘" + msg[i].ProvinceID + "‘>" + msg[i].ProvinceName + "</option>"); 12 } 13 } 14 }); 15 //市 16 $("#Province").change(function () { 17 $("#City").empty(); //清空数据 18 $("#District").empty(); //清空数据 19 $("#District").append("<option value=‘‘>" + "--请选择--" + "</option>"); 20 var ProvinceID = $(this).val(); 21 22 $.ajax({ 23 url: "Handler1.ashx?type=1", 24 type: "get", //类型 25 data: { 26 ProvinceID: ProvinceID 27 }, 28 dataType: "json", //json数据 29 success: function (msg) { 30 for (var i = 0; i < msg.length; i++) { $("#City").append("<option value=‘" + msg[i].CityID + "‘>" + msg[i].CityName + "</option>"); } 31 } 32 }); 33 }); 34 35 //区 36 $("#City").change(function () { 37 $("#District").empty(); //清空数据 38 var CityID = $(this).val(); 39 $.ajax({ 40 url: "Handler1.ashx?type=2", 41 type: "get", //类型 42 data: { 43 CityID: CityID 44 }, 45 dataType: "json", //json数据 46 success: function (msg) { 47 for (var i = 0; i < msg.length; i++) { $("#District").append("<option value=‘" + msg[i].DistrictID + "‘>" + msg[i].DistrictName + "</option>"); } 48 } 49 }); 50 51 }); 52 }); 53 54 <select id="Province"></select> 55 <select id="City"></select> 56 <select id="District" ></select> 57
结合ajax（一般处理程序）
1 using System; 2 using System.Collections.Generic; 3 using System.Linq; 4 using System.Web; 5 using System.Data; 6 using System.Web.Script.Serialization; 7 8 namespace GovSystem.Company 9 { 10 /// <summary> 11 /// Handler1 的摘要说明 12 /// </summary> 13 public class Handler1 : IHttpHandler 14 { 15 16 public string text; 17 public void ProcessRequest(HttpContext context) 18 { 19 int action = Convert.ToInt32(context.Request.QueryString["type"]); 20 switch (action) 21 { 22 case (int)GetType.省: 23 text = Sel_Province(context); 24 break; 25 case (int) GetType.市: 26 text=Sel_City(context); 27 break; 28 case (int)GetType.区: 29 text = Sel_District(context); 30 break; 31 } 32 context.Response.ContentType = "text/plain"; 33 context.Response.Write(text); 34 } 35 //省 36 private string Sel_Province(HttpContext context) 37 { 38 XieKe.BLL.S_Province b_Province = new XieKe.BLL.S_Province(); 39 DataTable dt=b_Province.GetList("").Tables[0]; 40 List<XieKe.Model.S_Province> listInfo = new List<XieKe.Model.S_Province>(); 41 for (int i = 0; i < dt.Rows.Count; i++) 42 { 43 XieKe.Model.S_Province m_Province = new XieKe.Model.S_Province { ProvinceID = long.Parse(dt.Rows[i]["ProvinceID"].ToString()), DateCreated = Convert.ToDateTime(dt.Rows[i]["DateCreated"]), DateUpdated = Convert.ToDateTime(dt.Rows[i]["DateUpdated"]), ProvinceName = dt.Rows[i]["ProvinceName"].ToString() }; 44 listInfo.Add(m_Province); 45 } 46 javascriptSerializer jssp = new JavaScriptSerializer(); 47 string s= jssp.Serialize(listInfo); 48 return s; 49 } 50 //市 51 private string Sel_City(HttpContext context) 52 { 53 string ProvinceID = context.Request.QueryString["ProvinceID"]; 54 XieKe.BLL.S_City b_City = new XieKe.BLL.S_City(); 55 56 DataTable dt = b_City.GetList("ProvinceID="+ProvinceID).Tables[0]; 57 List<XieKe.Model.S_City> listInfo = new List<XieKe.Model.S_City>(); 58 for (int i = 0; i < dt.Rows.Count; i++) 59 { 60 XieKe.Model.S_City m_City = new XieKe.Model.S_City { CityID = long.Parse(dt.Rows[i]["CityID"].ToString()), CityName = dt.Rows[i]["CityName"].ToString(), DateCreated = Convert.ToDateTime(dt.Rows[i]["DateCreated"]), DateUpdated = Convert.ToDateTime(dt.Rows[i]["DateUpdated"]), ProvinceID = long.Parse(dt.Rows[i]["ProvinceID"].ToString()), ZipCode = dt.Rows[i]["ZipCode"].ToString() }; 61 listInfo.Add(m_City); 62 } 63 JavaScriptSerializer jssp = new JavaScriptSerializer(); 64 return jssp.Serialize(listInfo); 65 } 66 //区 67 private string Sel_District(HttpContext context) 68 { 69 string CityID = context.Request.QueryString["CityID"]; 70 XieKe.BLL.S_District b_City = new XieKe.BLL.S_District(); 71 DataTable dt = b_City.GetList("CityID=" + CityID).Tables[0]; 72 List<XieKe.Model.S_District> listInfo = new List<XieKe.Model.S_District>(); 73 for (int i = 0; i < dt.Rows.Count; i++) 74 { 75 XieKe.Model.S_District m_District = new XieKe.Model.S_District { CityID = Convert.ToInt32(dt.Rows[i]["CityID"]), DistrictName = dt.Rows[i]["DistrictName"].ToString() }; 76 listInfo.Add(m_District); 77 } 78 JavaScriptSerializer jssp = new JavaScriptSerializer(); 79 return jssp.Serialize(listInfo); 80 } 81 public bool IsReusable 82 { 83 get 84 { 85 return false; 86 } 87 } 88 public enum GetType 89 { 90 省 = 0, 91 市 = 1, 92 区 = 2, 93 }; 94 } 95 96 }
以上是关于JQuery+Ajax制作省市联动的主要内容，如果未能解决你的问题，请参考以下文章
使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能