js实例教程-jQuery JSON实现无刷新三级联动实例探讨

发布时间:2018-11-29 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了js实例教程-jQuery JSON实现无刷新三级联动实例探讨脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。

代码如下:


<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 控件中的值 无法与下拉框选中的值相对应!
可能与初始化有关,赋值这段代码应该放到什么地方呢?或者有什么好的方法,欢迎讨论?

代码如下:


<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技巧 脚本宝典 欢迎评论哦!&nbsp;js技巧,巧夺天工,精雕玉琢。小宝典献丑了!

脚本宝典总结

以上是脚本宝典为你收集整理的js实例教程-jQuery JSON实现无刷新三级联动实例探讨全部内容,希望文章能够帮你解决js实例教程-jQuery JSON实现无刷新三级联动实例探讨所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。