提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  后端

当前栏目

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

实例 实现 刷新 探讨 联动 三级 jqueryjson
2023-06-13 09:15:00 时间
复制代码代码如下:

<asp:DropDownListID="ddl1"runat="server"Width="100px"></asp:DropDownList>
<asp:DropDownListID="ddl2"runat="server"Width="100px"></asp:DropDownList>
<asp:DropDownListID="ddl3"runat="server"Width="100px"></asp:DropDownList>

js:
复制代码代码如下:

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

LoadClass.ashx:
复制代码代码如下:
<%@WebHandlerLanguage="C#"Class="LoadClass"%>
usingSystem;
usingSystem.Web;
usingSystem.Text;
usingSystem.Data;
publicclassLoadClass:IHttpHandler{
publicvoidProcessRequest(HttpContextcontext){
//数组[{"ID":"275","Cname":"A1"},{"ID":"319","Cname":"A2"},{"ID":"322","Cname":"A3"}]
intstrId=Convert.ToInt32(context.Request["ddlId"]);
stringstrSQL="select*fromClasswhereparent_Ptr="+strId+"orderbyclassOrderasc";
dbd=newdb();
DataTabledt=d.getDT(strSQL);
StringBuilderstrClass=newStringBuilder();
if(dt!=null)
{
strClass.Append("[");
for(inti=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();
}
publicboolIsReusable{
get{
returnfalse;
}
}
}

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

选择下拉框后动态赋值到HiddenField控件中的值无法与下拉框选中的值相对应！
可能与初始化有关，赋值这段代码应该放到什么地方呢？或者有什么好的方法，欢迎讨论？

相关文章