jQuery JSON实现无刷新三级联动实例探讨


Posted in Javascript onMay 28, 2013
<asp:DropDownList ID="ddl1" runat="server" Width="100px" ></asp:DropDownList> 
<asp:DropDownList ID="ddl2" runat="server" Width="100px" ></asp:DropDownList> 
<asp:DropDownList ID="ddl3" runat="server" Width="100px" ></asp:DropDownList>

js:
<script src="js/jquery-1.4.2.min.js" type="text/javascript" ></script> 
<script type="text/javascript"> 
$(document).ready(function () { 
GetA(); 
$("#ddl1").change(function () { GetB(); }); 
$("#ddl2").change(function () { GetC(); }); 
}); 
function GetA() 
{ 
$("#ddl1").html(""); 
$("#ddl1").append("<option value='-1' selected='selected'>请选择...</option>"); 
//$("select[name$=ddl1] > option:selected").remove(); 
var strId = 0; 
$.getJSON("LoadClass.ashx?ddlId=" + strId, function (data) { 
for (var i = 0; i < data.length; i++) { 
$("select[name$=ddl1]").append($("<option></option>").val(data[i].ID).html(data[i].Cname)); 
}; 
GetB(); 
}); 
} 
function GetB() 
{ 
$("#ddl2").html(""); $("#ddl3").html(""); 
var strId = $("#ddl1").attr("value"); 
if (strId != 0) { 
$.getJSON("LoadClass.ashx?ddlId=" + strId, function (data) { 
for (var i = 0; i < data.length; i++) { 
$("select[name$=ddl2]").append($("<option></option>").val(data[i].ID).html(data[i].Cname)); 
}; 
GetC(); 
}); 
} 
} 
function GetC() 
{ 
$("#ddl3").html(""); 
var strId = $("#ddl2").attr("value"); 
if (strId != 0) { 
$.getJSON("LoadClass.ashx?ddlId=" + strId, function (data) { 
for (var i = 0; i < data.length; i++) { 
$("select[name$=ddl3]").append($("<option></option>").val(data[i].ID).html(data[i].Cname)); 
}; 
}); 
} 
} 
</script>

LoadClass.ashx:
<%@ WebHandler Language="C#" Class="LoadClass" %> 
using System; 
using System.Web; 
using System.Text; 
using System.Data; 
public class LoadClass : IHttpHandler { 
public void ProcessRequest (HttpContext context) { 
// 数组 [{"ID":"275","Cname":"A1"},{"ID":"319","Cname":"A2"},{"ID":"322","Cname":"A3"}] 
int strId = Convert.ToInt32(context.Request["ddlId"]); 
string strSQL = "select * from Class where parent_Ptr=" + strId + " order by classOrder asc "; 
db d = new db(); 
DataTable dt = d.getDT(strSQL); 
StringBuilder strClass = new StringBuilder(); 
if (dt != null) 
{ 
strClass.Append("["); 
for (int i = 0; i < dt.Rows.Count; i++) 
{ 
strClass.Append("{"); 
strClass.Append("\"ID\":\"" + dt.Rows[i]["id"].ToString() + "\","); 
strClass.Append("\"Cname\":\"" + dt.Rows[i]["classCname"].ToString() + "\""); 
if (i != dt.Rows.Count - 1) 
{ 
strClass.Append("},"); 
} 
} 
} 
strClass.Append("}"); 
strClass.Append("]"); 
context.Response.ContentType = "application/json"; 
context.Response.ContentEncoding = Encoding.UTF8; 
context.Response.Write(strClass.ToString()); 
context.Response.End(); 
} 
public bool IsReusable { 
get { 
return false; 
} 
} 
}

注意:
//后台只能获取value值,不能直接获取text,需要通过js、控件中转 
//结果:275 276 277 
Label1.Text = Request.Form[ddl1.UniqueID] + " " + Request.Form["ddl2"] + " " + Request.Form[ddl3.ClientID.Replace("_", "$")] ;遇到的问题:下拉框text的值通过HiddenField控件中转 <asp:HiddenField ID="HiddenField1" runat="server" /> 
<asp:HiddenField ID="HiddenField2" runat="server" /> 
<asp:HiddenField ID="HiddenField3" runat="server" /> 
把选中下拉框的值赋予隐藏控件中: <script type="text/javascript"> 
var Key1 = $("#ddl1>option:selected").val(); 
$('#HiddenField1').val(Key1); 
var Key2 = $("#ddl2>option:selected").val(); 
$('#HiddenField2').val(Key2); 
var Key3 = $("#ddl3>option:selected").val(); 
$('#HiddenField3').val(Key3); 
</script>

选择下拉框后 动态赋值到HiddenField 控件中的值 无法与下拉框选中的值相对应!
可能与初始化有关,赋值这段代码应该放到什么地方呢?或者有什么好的方法,欢迎讨论?
Javascript 相关文章推荐
js+html5通过canvas指定开始和结束点绘制线条的方法
Jun 05 Javascript
JS控制静态页面之间传递参数获取参数并应用的简单实例
Aug 10 Javascript
jQuery绑定事件的四种方式介绍
Oct 31 Javascript
利用策略模式与装饰模式扩展JavaScript表单验证功能
Feb 14 Javascript
详解使用grunt完成requirejs的合并压缩和js文件的版本控制
Mar 02 Javascript
JavaScript 基础表单验证示例(纯Js实现)
Jul 20 Javascript
解决betterScroll在vue中存在图片时,出现拉不动的问题
Sep 27 Javascript
vue 本地服务不能被外部IP访问的完美解决方法
Oct 29 Javascript
浅入深出Vue之自动化路由
Aug 06 Javascript
关于layui 实现点击按钮添加一行(方法渲染创建的table)
Sep 29 Javascript
探索node之事件循环的实现
Oct 30 Javascript
基于JavaScript实现年月日三级联动
Jun 22 Javascript
jQuery实现随意改变div任意属性的名称和值(部分原生js实现)
May 28 #Javascript
js仿百度有啊通栏展示效果实现代码
May 28 #Javascript
jquery实现商品拖动选择效果代码(自写)
May 28 #Javascript
兼容IE和FF的图片上传前预览js代码
May 28 #Javascript
Extjs中ComboBoxTree实现的下拉框树效果(自写)
May 28 #Javascript
jQuery实现可拖动的浮动层完整代码
May 27 #Javascript
Jquery实现视频播放页面的关灯开灯效果
May 27 #Javascript
You might like
通过对php一些服务器端特性的配置加强php的安全
2006/10/09 PHP
深入理解curl类,可用于模拟get,post和curl下载
2013/06/08 PHP
PHP中nowdoc和heredoc使用需要注意的一点
2014/03/21 PHP
PHP的图像处理实例小结【文字水印、图片水印、压缩图像等】
2019/12/20 PHP
js变换显示图片的实例
2013/04/16 Javascript
js实现的常用的左侧导航效果
2013/10/17 Javascript
Jquery Uploadify上传带进度条的简单实例
2014/02/12 Javascript
jQuery将多条数据插入模态框的示例代码
2014/09/25 Javascript
值得分享的Bootstrap Table使用教程
2016/11/23 Javascript
node 使用 async 控制并发的方法
2018/05/07 Javascript
vue2.0项目实现路由跳转的方法详解
2018/06/21 Javascript
js中split()方法得到的数组长度问题
2018/07/19 Javascript
精读《Vue3.0 Function API》
2020/05/20 Javascript
Python中的字符串替换操作示例
2016/06/27 Python
python 中random模块的常用方法总结
2017/07/08 Python
利用信号如何监控Django模型对象字段值的变化详解
2017/11/27 Python
Python实现检测文件MD5值的方法示例
2018/04/11 Python
python多个模块py文件的数据共享实例
2019/01/11 Python
基于Python实现迪杰斯特拉和弗洛伊德算法
2020/05/27 Python
Django 对IP访问频率进行限制的例子
2019/08/30 Python
利用html5的websocket实现websocket聊天室
2013/12/12 HTML / CSS
捷克体育用品购物网站:D-sport
2017/12/28 全球购物
Ray-Ban雷朋太阳眼镜英国官网:Ray-Ban UK
2019/11/23 全球购物
英国网上超市:Ocado
2020/03/05 全球购物
大学生活动总结怎么写
2014/04/29 职场文书
儿童生日会策划方案
2014/05/15 职场文书
师范类求职信
2014/06/21 职场文书
党员群众路线教育实践活动剖析材料
2014/10/10 职场文书
2014年公务员转正工作总结
2014/11/07 职场文书
2014七年级班主任工作总结
2014/12/05 职场文书
教师节班会开场白
2015/06/01 职场文书
教师见习总结范文
2015/06/23 职场文书
结婚典礼主持词
2015/06/29 职场文书
2016医师资格考试考生诚信考试承诺书
2016/03/25 职场文书
Pytorch中使用ImageFolder读取数据集时忽略特定文件
2022/03/23 Python
Android中的Launch Mode详情
2022/06/05 Java/Android