首页 > 代码库 > JQuery+Ajax实战三级下拉列表联动（八）
JQuery+Ajax实战三级下拉列表联动（八）
本片文章为练习，项目中不会这样写：
一：涉及到的知识点：
jQuery Dom操作
jQuery Ajax操作
ASP.net中的json操作
二：用了自动代码生成器
1.Dal层的代码：
public static partial class BranchTwoService { /// <summary> /// 根据一级机构的ID得二级机构列表 /// </summary> /// <param name="branchOneId">1级机构ID</param> /// <returns></returns> public static IList<BranchTwo> GetBranchTwoByBranchOneId(int branchOneId) { string strsql = "select * from BranchTwo where BranchOneNo=" + branchOneId; return GetBranchTwosBySql(strsql); } }public static partial class BranchThirdService { /// <summary> /// 根据二级机构的ID得三级机构列表 /// </summary> /// <param name="branchTwoId">2级机构ID</param> /// <returns></returns> public static IList<BranchThird> GetBranchThirdByBranchTwoId(int branchTwoId) { string strsql = "select * from BranchThird where BranchTwoNo=" + branchTwoId; return GetBranchThirdsBySql(strsql); } }2.BLL层的代码：
public static partial class BranchTwoManager { /// <summary> /// 根据一级机构的ID得二级机构列表 /// </summary> /// <param name="branchOneId">1级机构ID</param> /// <returns></returns> public static IList<BranchTwo> GetBranchTwoByBranchOneId(int branchOneId) { return DAL.BranchTwoService.GetBranchTwoByBranchOneId(branchOneId); } } public static partial class BranchThirdManager { /// <summary> /// 根据二级机构的ID得三级机构列表 /// </summary> /// <param name="branchTwoId">2级机构ID</param> /// <returns></returns> public static IList<BranchThird> GetBranchThirdByBranchTwoId(int branchTwoId) { return DAL.BranchThirdService.GetBranchThirdByBranchTwoId(branchTwoId); } }UI层的代码：
protected void Page_Load(object sender, EventArgs e) { IList<Models.BranchOne> branchOnes = BLL.BranchOneManager.GetAllBranchOnes(); string json = JsonHelper.Serialize(branchOnes); Response.Write(json); } protected void Page_Load(object sender, EventArgs e) { if (Request["branchoneid"] != null) { int branchoneId = int.Parse(Request.QueryString["branchoneid"]); IList<Models.BranchTwo> branchTwos = BLL.BranchTwoManager.GetBranchTwoByBranchOneId(branchoneId); Response.Write(JsonHelper.Serialize(branchTwos)); } }public partial class BranchThirdHandler : System.Web.UI.Page{ protected void Page_Load(object sender, EventArgs e) { if (Request["branchtwoid"] != null) { int branchtwoId = int.Parse(Request.QueryString["branchtwoid"]); IList<Models.BranchThird> branchThirds= BLL.BranchThirdManager.GetBranchThirdByBranchTwoId(branchtwoId); Response.Write(JsonHelper.Serialize(branchThirds)); } }}JQuery代码：
%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" ><head runat="server"> <title>jQuery+Ajax实战三级下拉列表联动</title> <script src="http://www.mamicode.com/Scripts/jquery-1.2.6.js" type="text/javascript"></script><%-- <script src="http://www.mamicode.com/Scripts/jquery-1.2.6-vsdoc-cn.js" type="text/javascript"></script>--%> <script type="text/javascript"> $(document).ready(function() { $("#divLoading").ajaxStart(function() { $(this).show(); }) .ajaxSuccess(function() { $(this).hide() }) .ajaxError(function() { $(this).html("数据加载失败!"); }); $.getJSON("BranchOneHandler.aspx", function(data) { var $cbxBranchOne = $("#cbxBranchOne"); $.each(data, function(i, json) { var $option = $("<option/>").append(json.branchName).attr("value", json.id); $cbxBranchOne.append($option); }); $cbxBranchOne[0].selectedIndex = 0; $cbxBranchOne.change(function() { var $cbxBranchTwo = $("#cbxBranchTwo"); $cbxBranchTwo.empty(); //清空options var branchoneId = $(this).attr("value"); if (branchoneId) { $.getJSON("BranchTowHandler.aspx", { branchoneid: branchoneId }, function(data) { $.each(data, function(i, json) { var $option = $("<option/>").append(json.branchName).attr("value", json.id); $cbxBranchTwo.append($option); }); }); } $cbxBranchTwo.change(function() { var $cbxBranchThird = $("#cbxBranchThird"); $cbxBranchThird.empty(); var branchtowId = $(this).attr("value"); if (branchtowId) { $.getJSON("BranchThirdHandler.aspx", { branchtwoid: branchtowId }, function(data) { $.each(data, function(i, json) { var $option = $("<option/>").append(json.branchName).attr("value", json.id); $cbxBranchThird.append($option); }); }); } }); }); }); }); </script></head><body style="text-align:center;padding-top:0px;"><div id="divLoading" style="width:50px;height:20px;color;white;background-color:Green;text-align:center;padding-top:3px;position:absolute;top:0px;left:0px;display:none;">Loading...</div> <form id="form1" runat="server"> <div style="padding-top:30px"> <table id="tbBranch" style="width: 361px; border-left-color: #cc00ff; border-bottom-color: #cc00ff; border-top-style: solid; border-top-color: #cc00ff; border-right-style: solid; border-left-style: solid; border-right-color: #cc00ff; border-bottom-style: solid;" border="1"> <tr> <td colspan="3" style="height: 21px; background-color: #cc00ff" align="center"> <span style="color: #ffffff"><strong> jQuery+Ajax实战三级下拉列表联动</strong></span></td> </tr> <tr> <td style="width: 74px; background-color: #cc00ff; height: 38px;"> 一级机构</td> <td colspan="2" style="width: 243px; height: 38px;"> <select id="cbxBranchOne" style="width: 171px"> <option selected="selected"></option> </select></td> </tr> <tr> <td style="width: 74px; background-color: #cc00ff; height: 31px;"> 二级机构</td> <td colspan="2" style="width: 243px; height: 31px;"> <select id="cbxBranchTwo" style="width: 171px"> <option selected="selected"></option> </select> </td> </tr> <tr> <td style="width: 74px; background-color: #cc00ff; height: 29px;"> 三级机构</td> <td colspan="2" style="width: 243px; height: 29px;"> <select id="cbxBranchThird" style="width: 171px"> <option selected="selected"></option> </select> </td> </tr> </table> </div> </form></body></html>用到的帮助类：
using System;using System.Collections.Generic;using System.Web;using System.IO;using System.Text;/// <summary>/// JSON序列化与反序列化辅助类/// </summary>public class JsonHelper{ /// <summary> /// 用于把对象data序列化为json格式的字符串 /// </summary> /// <typeparam name="T"></typeparam> /// <param name="data"></param> /// <returns></returns> public static string Serialize<T>(T data) { System.Runtime.Serialization.Json.DataContractJsonSerializer serializer = new System.Runtime.Serialization.Json.DataContractJsonSerializer(data.GetType()); using (MemoryStream ms = new MemoryStream()) { serializer.WriteObject(ms, data); return Encoding.UTF8.GetString(ms.ToArray()); //ms.Position = 0; //using (StreamReader sr = new StreamReader(ms)) //{ // return sr.ReadToEnd(); //} } } /// <summary> /// 用于把json格式的js对象反序列化为C#中的类 /// </summary> /// <typeparam name="T"></typeparam> /// <param name="json"></param> /// <returns></returns> public static T Deserialize<T>(string json) { T obj = Activator.CreateInstance<T>(); using (MemoryStream ms = new MemoryStream(Encoding.UTF8.GetBytes(json))) { System.Runtime.Serialization.Json.DataContractJsonSerializer serializer = new System.Runtime.Serialization.Json.DataContractJsonSerializer(obj.GetType()); return (T)serializer.ReadObject(ms); } }}
JQuery+Ajax实战三级下拉列表联动（八）
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。