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

代码如下:

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