下拉框二级联动,页面无刷新
A. (aspx)
<asp:DropDownList ID="DropDownList1" runat="server" Height="16px" onchange="getChildren(this.options[this.selectedIndex].value, 'ddl');" Width="139px"> <asp:ListItem Value="0">请选择</asp:ListItem> <asp:ListItem Value="BJ">北京</asp:ListItem> <asp:ListItem Value="TJ">天津</asp:ListItem> <asp:ListItem Value="HB">湖北</asp:ListItem> </asp:DropDownList> <asp:DropDownList ID="ChildDropDown" runat="server" Width="60"> </asp:DropDownList> </p> <script language="javascript"> function ClientCallback(result, context) { var childDropDown = document.getElementById("MainContent_ChildDropDown"); if (!childDropDown) { return; } childDropDown.length = 0; if (!result) { return; } var rows = result.split('|'); for (var i = 0; i < rows.length; ++i) { var option = document.createElement("OPTION"); option.value = rows[i]; option.innerHTML = rows[i]; childDropDown.appendChild(option); } childDropDown.style.visibility = "visible"; } function ClientCallbackError(result, context) { alert(result); } </script>
B.(cs 文件)
1. 实现ICallbackEventHandler 接口
2.向客户端注册回传方法 protected void Page_Load(object sender, EventArgs e) { //向客户端注册事件 ClientCallback,ClientCallbackError 前台页面实现的JavaScript方法 string callBack = Page.ClientScript.GetCallbackEventReference(this, "arg", "ClientCallback", "context", "ClientCallError", false); string clientFunction = "function getChildren(arg,context){"+callBack+";};"; Page.ClientScript.RegisterClientScriptBlock(this.GetType(),"getChildren",clientFunction,true); } //3.实现接口两个方法 string callBackResult = ""; public string GetCallbackResult() { return callBackResult; } public void RaiseCallbackEvent(string eventArgument) { switch (eventArgument) { case "BJ": callBackResult = "One|Two|Three"; break; case "TJ": callBackResult = "Four|Five|Six"; break; case "HB": callBackResult = "Seven|Eight|Nine"; break; default : callBackResult = ""; break; } }