DropDownList无刷新级联下拉(固定级联),Jquery获取JOSN数据
1.HTML页面
<td align="left">
<asp:DropDownList ID="ddlOne" runat="server">
</asp:DropDownList>
<asp:DropDownList ID="ddlTwo" runat="server">
</asp:DropDownList>
</td>
<asp:DropDownList ID="ddlOne" runat="server">
</asp:DropDownList>
<asp:DropDownList ID="ddlTwo" runat="server">
</asp:DropDownList>
</td>
ddlOne的绑定这里就不说了,后台直接绑定即可,关键是选择ddlOne的时候页面无刷新的级联ddlTwo。
首先添加ddlOne的选择事件
this.ddlOne.Attributes.Add("OnChange", "BindDropDownList()");
2.BindeDropDownList()方法读取ashx,以获取父类ID等于ddlOne选中值的集合,这里我们用JOSN方式获取
JS
function BindDropDownList() {
var one = $("#ddlOne").val();
$("#ddlTwo").html("");
$.getJSON("../Customer/Area.ashx?parentid=" + one, null, function(json) {
$.each(json, function(i) { $("#ddlTwo").append($("<option></option>").val(json[i].areacode).html(json[i].areaname)) });
});
$("<option></option>").val("-1").html("---请选择城市---").appendTo("#ddlTwo");
}
var one = $("#ddlOne").val();
$("#ddlTwo").html("");
$.getJSON("../Customer/Area.ashx?parentid=" + one, null, function(json) {
$.each(json, function(i) { $("#ddlTwo").append($("<option></option>").val(json[i].areacode).html(json[i].areaname)) });
});
$("<option></option>").val("-1").html("---请选择城市---").appendTo("#ddlTwo");
}
2.area.ashx
ashx
public void ProcessRequest(HttpContext context)
{
StringBuilder sb = new StringBuilder();
string strparent = context.Request.QueryString["parentid"].ToString();
string strwhere = " areacode like '" + strparent.Substring(0, 2) + "%' and areacode not like '%0000'";//取得子类
DataTable dt = new BLL.SF_Host_AreaInfo().GetList(strwhere).Tables[0];
if (dt == null || dt.Rows.Count == 0)
{
return;
}
else
{
sb.Append("[");
for (int i = 0; i < dt.Rows.Count; i++)
{
//返回JOSN数据
sb.Append("{\"areacode\":\"" + dt.Rows[i]["areacode"].ToString() + "\",\"areaname\":\"" + dt.Rows[i]["areaname"].ToString() + "\"},");
}
sb.Remove(sb.Length - 1, 1);
sb.Append("]");
}
context.Response.ContentType = "application/json";
context.Response.ContentEncoding = Encoding.UTF8;
context.Response.Write(sb.ToString());
}
{
StringBuilder sb = new StringBuilder();
string strparent = context.Request.QueryString["parentid"].ToString();
string strwhere = " areacode like '" + strparent.Substring(0, 2) + "%' and areacode not like '%0000'";//取得子类
DataTable dt = new BLL.SF_Host_AreaInfo().GetList(strwhere).Tables[0];
if (dt == null || dt.Rows.Count == 0)
{
return;
}
else
{
sb.Append("[");
for (int i = 0; i < dt.Rows.Count; i++)
{
//返回JOSN数据
sb.Append("{\"areacode\":\"" + dt.Rows[i]["areacode"].ToString() + "\",\"areaname\":\"" + dt.Rows[i]["areaname"].ToString() + "\"},");
}
sb.Remove(sb.Length - 1, 1);
sb.Append("]");
}
context.Response.ContentType = "application/json";
context.Response.ContentEncoding = Encoding.UTF8;
context.Response.Write(sb.ToString());
}