JQuery+Ajax实战三级下拉列表联动（八）
本片文章为练习，项目中不会这样写：
一：涉及到的知识点：
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="Scripts/jquery-1.2.6.js" type="text/javascript"></script>
<%-- <script src="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实战三级下拉列表联动（八）的更多相关文章
- jquery ajax实现省市二级联动
今天给大家带来使用jQuery ajax实现的省市联动效果.我们直奔主题,先说下实现思路: 准备数据 这里数据库我使用的是mysql,先看下表格: provience表 city表 这里使用provi ...
- java结合jQuery.ajax实现左右菜单联动刷新列表内容
http://域名/一级菜单ID-二级菜单ID/ 用这种URL请求页面,出现如图所看到的内容: 该页面包括四部分,顶部文件夹+左側菜单+右側菜单+右下側数据列表. 左側菜单包括一级菜单和二级菜单,点击 ...
- ASP.NET webform基于Jquery,AJAX的三级联动
主要html代码 <select id="province"> <option value="0">--请选择省份--</opti ...
- 用jQuery,ajax,实现三级联动封装JS的文件
// JavaScript Document $(document).ready(function(e) { //找到ID=SANJI的DIV,造三个下拉扔进去 var str = "< ...
- Jquery ajax动态更新下拉列表的内容
$("#book_id").change(function(){ $book_id=$(this).children('option:selected').val(); //ale ...
- 用jquery ajax做的select菜单，选中的效果
//用server端语言赋值给js变量 var departmentId = '<%=提交的值 %>', deviceId='<%=提交的值 %>' $(fun ...
- 使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能
使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能 要求:写一个省市区(或者年月日)的三级联动,实现地区或时间的下拉选择. 实现技术:php ajax 实现:省级下拉变化时市下拉区下 ...
- AJAX部分---对比js做日期的下拉选择 和 ajax做三级联动；
js做日期选择: 实现当前年份的前5后5年的日期选择 实现功能:年份和月份页面加载完成使用JS循环添加,天数根据月份的变化动态添加改变 扩展功能:天数可以根据闰年平年变化 <body> & ...
- ajax 实现三级联动
ajax 实现三级联动,相当于写了一个小插件,用的时候直接拿过来用就可以了,这里我用了数据库中的chinastates表, 数据库内容很多,三级联动里的地区名称都在里面,采用的是代号副代号的方式 比如 ...
随机推荐
- JavaSE学习总结（十八）—— 多线程
多线程(英语:multithreading),是指从软件或者硬件上实现多个线程并发执行的技术.具有多线程能力的计算机因有硬件支持而能够在同一时间执行多于一个线程,进而提升整体处理性能.具有这种能力的系 ...
- 在 chrome 上导出 pdf
用html+css写出网页,然后在chrome上导出pdf 1. command + p:快捷呼出打印: 2. “目标打印机”:选择“更改”,之后选择“另存为PDF”: 3. 点“更多设置”,可以勾选 ...
- weblogic11g 修改密码和重置密码【原】
修改密码 知道密码的情况下,可参考该链接 http://www.cnblogs.com/may12138/p/6022946.html 或 http://www.cnblogs.com/lsdb/p/ ...
- <T extends Comparable<? super T>>什么意思
<T extends Comparable<? super T>>首先这是运用了java的泛型①extends后面跟的类型如<任意字符 extends 类/接口>表 ...
- Newtonsoft.Json 两个Attribute含义
1.[JsonIgnore] 看名字就知道了,通过这个Attribute可以忽略序列化某个实体类字段 2.[JsonProperty("Font")] 设置序列化到json中的实际 ...
- Error: failed to execute 'C:\Keil\ARM\ARMCC'的解决办法
在KEIL新建工程时,容易出现该问题,我查了一些资料,最终找到该问题解决方法: 第一步:在keil里的菜单栏依次选择Project->Manage->Components,Environm ...
- VS新建项目工具箱图标丢失问题
(1)在电脑里搜索*.tbd文件(2)建一个项目,把需要的工具箱图标加载上,退出 VS. (3)复制一份toolbox.tbd,重命名为toolbox_reset.tbd 然后以后新建项目就可以了.这 ...
- POJ2421 Constructing Roads【最小生成树】
题意: 有N个点,有些点已经连接了,然后求出所有点的连接的最短路径是多少. 思路: 最小生成树的变形,有的点已经连接了,就直接把他们的权值赋为0,一样的就做最小生成树. 代码: prime: #inc ...
- mod_wsgi 的两种模式
mod_wsgi 的两种模式 http://ssmax.net/archives/977.html http://www.cnblogs.com/yuxc/p/3555005.html mod_wsg ...
- B - 集合选数 （状压DP）
题目链接:https://cn.vjudge.net/contest/281960#problem/B 题目大意:中文题目 具体思路: 我们通过构造矩阵, x , 3x,9x,27x 2x,6x,18 ...