当前位置:  编程技术>jquery

jquery+JSON无刷新三级联动的例子

    来源: 互联网  发布时间:2014-09-03

    本文导语:  1,asp.net部分   2,js代码部分   代码示例: /**  * json jquery 无刷新三级联动  * edit www. */ $(document).ready(function () { GetA(); $("#ddl1").change(function () { GetB(); }); $("#ddl2").change(function () { GetC(); }); }); function GetA() { $("#ddl1")...

1,asp.net部分
 



2,js代码部分
 

代码示例:


/**
 * json jquery 无刷新三级联动
 * edit www.
*/
$(document).ready(function () {
GetA();
$("#ddl1").change(function () { GetB(); });
$("#ddl2").change(function () { GetC(); });
});
function GetA()
{
$("#ddl1").html("");
$("#ddl1").append("请选择...");
//$("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($("").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($("").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($("").val(data[i].ID).html(data[i].Cname));
};
});
}
}

3,文件LoadClass.ashx:
 

代码示例:

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控件中转


 

把选中下拉框的值,赋予隐藏控件中:
 


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);

 

选择下拉框后,动态赋值到HiddenField控件中的值,无法与下拉框选中的值相对应。
可能与初始化有关,赋值这段代码应该放到什么地方呢?有知道的朋友,欢迎分享一下实现方法,不胜感激。


    
 
 

您可能感兴趣的文章:

  • jQuery联动下拉框 jQuery optionTree
  • jQuery实现的多选框多级联动插件
  • Jquery联动下拉菜单实现代码
  • jquery二级联动的实现代码一例
  • Jquery、Ajax、Struts2完成定时刷新的方法 iis7站长之家
  • JQuery打造省市下拉框联动效果
  • jquery select联动操作的小例子
  • 联动下拉菜单代码(jQuery与JSON实现)
  • asp.net+jquery无刷新三级联动的代码举例
  • jQuery 中国省市两级联动选择附图
  • jquery刷新页面 jquery局部刷新与及全页面刷新
  • 使用jquery局部刷新(jquery.load)从数据库取出数据
  • Jquery更换主题同时刷新iframe页面的代码举例
  • jquery刷新aspx中iframe的src的代码
  • jQuery 定时局部刷新(setInterval)方法总结
  • Jquery 定时局部刷新的代码举例
  • jquery禁用右键单击功能屏蔽F5刷新
  • jquery在firefox中刷新iframe页面,提示重复之前动作的解决方法
  • jquery ajax 局部刷新小案例
  • Jquery 随机刷新页面背景图片
  • jquery刷新页面代码及js常用函数汇总
  • 页面刷新时记住滚动条的位置jquery代码
  • Jquery实现无闪烁定时刷新的代码
  • Jquery、Ajax、Struts2定时刷新功能的实现代码
  • Jquery 无刷新提交表单的实例代码
  • Jquery、Ajax、Struts2完成定时刷新的方法
  • jquery捕获超链接事件并局部刷新的代码一例
  • jquery 局部刷新(jsp环境)
  • jquery ajax 无刷新提交数据与无刷新登录的例子
  • jquery控制自动刷新的代码举例
  •  
    本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
    本站(WWW.)站内文章除注明原创外,均为转载、整理或搜集自网络。欢迎任何形式的转载,转载请注明出处。












  • 相关文章推荐
  • JQuery转义id中特殊字符的例子
  • jquery检测浏览器名称和版本信息的例子
  • jQuery.proxy向函数中传参的小例子
  • jQuery提交多个表单的小例子
  • jquery获得url参数列表的例子
  • jQuery查看事件内容的小例子
  • jQuery循环array与map小例子
  • jquery 绑定、捕获、拦截回车事件的例子
  • jquery转化Datatable为json数据的例子
  • jquery 获取URL请求参数的小例子
  • jquery 文字上下滚动的小例子
  • jquery链式操作、链式写法的小例子
  • jquery hide方法隐藏元素的例子
  • jquery判断浏览器后退时弹出消息的例子
  • jQuery为checkbox、radio赋值的例子
  • jquery隐藏标签、显示标签的例子
  • JQuery checkbox全选的小例子
  • jQuery判断checkbox是否选中的小例子
  • jQuery元素属性attr设置多个键值的例子
  • jQuery 随机展示图片的例子
  • 通过javascript库JQuery实现页面跳转功能代码
  • jQuery鼠标动画插件 jquery-ahover
  • jQuery概述,代码举例及最新版下载
  • jQuery向导插件 Jquery Wizard Plugin
  • Jquery操作html复选框checkbox:全选,全不选和反选
  • jQuery圆角插件 jQuery Corners
  • struts+spring+hibernate+jquery实现分页功能的几个基本类介绍(异步加载)
  • jQuery相册插件 jQuery.popeye
  • jQuery UI组件 jQuery UI
  • jQuery右键菜单插件 jQuery ContextMenu
  • jQuery分页插件 Pagination jQuery Plugin


  • 站内导航:


    特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

    ©2012-2021,,E-mail:www_#163.com(请将#改为@)

    浙ICP备11055608号-3