DropDownList无刷新级联

1.两级联：在一个下拉列边框(ID:ddlBuildName)中选择楼栋名称，在另一个下拉列表框

(ID:ddlRoomNo)中无刷新的自动加载该栋楼的房间列表。
其中ddlBuildName的数据是通过强类型DataSet绑定的。ddlRoomNo的数据是根据ddlBuildName的选

值通过JQuery无刷新加载的。

<tr> <td class="text">楼栋名称：</td> <td class="control"> <asp:DropDownList ID="ddlBuildName" runat="server" DataSourceID="odsBuildInfo" DataValueField="Id" DataTextField="buildingName"> </asp:DropDownList> </td> </tr> <tr> <td class="text">房间编号：</td> <td class="control"> <asp:DropDownList ID="ddlRoomNo" runat="server"> </asp:DropDownList> </td> </tr>

2.在页面Page_Load的时候为这两个DropDownList控件分别添加一个同样的属性，即在客户端的

onchange事件。setRoomNoValue()事件是在ddlBuildName选择的时候触发的，它实现将房间号加载

到ddlRoomNo中。getRoomNoValue()事件是在ddlRoomNo选择的时候记下其选择的值。

protected void Page_Load(object sender, EventArgs e) { ddlBuildName.Attributes.Add("onchange", "setRoomNoValue();"); ddlRoomNo.Attributes.Add("onchange","getRoomNoValue();"); }

3.默认情况下是无法取得ddlRoomNo中当前选中的值，所以需要通过添加一个隐藏控件，把

ddlRoomNo中选择的值赋给隐藏控件，最后后台cs代码通过隐藏控件的Value属性间接地获得

ddlRoomNo的值。
这是隐藏控件：

<asp:HiddenField ID="hiddRoomNo" runat="server" />    

 

 

 下面是cs代码获取ddlBuildName的值和ddlRoomNo的值

string buildNameNo = ddlBuildName.SelectedValue; string roomNo = hiddRoomNo.Value;

4.setRoomNoValue()事件和getRoomNoValue()。

EnableEventValidation="false"

<mce:script type="text/javascript"><!-- function setRoomNoValue(){ //获取ddlBuildName中当前选择的值 var buildNameNo=$("#"+"<%=ddlBuildName.ClientID %>").val(); //先清空ddlRoomNo中的数据 $("#"+"<%=ddlRoomNo.ClientID %>").empty(); //向getRoomNo.ashx发出请求，并传递ddlBuildName当前选择的值buildNameNo $.post("getRoomNo.ashx",{"buildNameNo":buildNameNo}, function(data,status){ if(status=="success"){ if(data=="none"){ alert("没有房间信息！"); return; } var array=data.split('|'); for(var i=0;i<array.length;i++){ //为ddlRoomNo添加数据 var option=$("<option value='"+array[i]+"'>"+array[i]+"</option>"); $("#"+"<%=ddlRoomNo.ClientID %>").append(option); } //获取ddlRoomNo中第一项的值roomNo var roomNo=$("#"+"<%=ddlRoomNo.ClientID %>"+" option:first").val() //把roomNo赋值给服务端的隐藏控件，这样在后台cs代码中获得ddlRoomNo的值 $("#"+"<%=hiddRoomNo.ClientID %>").val(roomNo); } }); } function getRoomNoValue(){ //当ddlRoomNo的onchange事件发生时，把所选的值赋给roomNo var roomNo=$("#"+"<%=ddlRoomNo.ClientID %>").val(); //把roomNo赋值给服务端的隐藏控件 $("#"+"<%=hiddRoomNo.ClientID %>").val(roomNo); } $(function(){ $("input[flag=stuNo]").blur(function(){ var StuNo=$(this).val(); if(StuNo==""){ return; } $.post("IsExistStuNo.ashx",{"StuNo":StuNo},function(data,status){ if(status=="success"){ if(data=="No"){ $("#lblMsg").text("无此学号，请重新输入！").css("color","red"); return; } else if(data=="Yes"){ $("#lblMsg").text(""); } } else{ alert("服务器错误！"); return; } }); }); $("input[flag=InDate]").focus(function(){ $(this).datepicker({inline: true,dateFormat:'yy-mm-dd'}); }); $("#btnCancle").click(function(){ $("input[flag=stuNo]").val(""); $("input[flag=InDate]").val(""); $("#lblMsg").text(""); }); //在网页加载完后给ddlRoomNo赋初始值 setRoomNoValue(); }); // --></mce:script>

5.一般处理程序：getRoomNo.ashx

<%@ WebHandler Language="C#" Class="getRoomNo" %> using System; using System.Web; public class getRoomNo : IHttpHandler { public void ProcessRequest (HttpContext context) { context.Response.ContentType = "text/plain"; string buildNameNo = context.Request["buildNameNo"]; var adapter = new DataSetRoomInfoTableAdapters.T_RoomInfoTableAdapter(); var data = adapter.GetDataByBulidingNameNo(Convert.ToInt32(buildNameNo)); System.Text.StringBuilder sb = new System.Text.StringBuilder(); if (data.Count <= 0) { context.Response.Write("none"); } else { foreach (var roomInfoRow in data) { sb.Append(roomInfoRow.roomNo).Append("|"); } context.Response.Write(sb.ToString().Trim('|')); } } public bool IsReusable { get { return false; } } }