今天遇到一个奇怪的问题,某一页面须要使用三级级联下拉列表框。为提升用户体验,采用jQuery的cascadingDropDown插件调用后台Web Services来实现ajax填充。javascript
填充没有任何问题,可是在服务器端却取不出来下拉表中的内容。页面代码以下。 java
<form id="form1" runat="server">
<div>
<h3>看看用js填充的dropdownlist控件在服务器端能读出来吗?</h3>
三个级联下拉列表框:
<asp:DropDownList runat="server" id="bigTypeList" Width="150">
</asp:DropDownList>
<asp:DropDownList runat="server" id="typeList" Width="150">
</asp:DropDownList>
<asp:DropDownList runat="server" id="smalltypeList" Width="150">
</asp:DropDownList>
<br />
<asp:Button runat="server" Text="读取下拉表" ID="OK" onclick="OK_Click" /><br />
你选的是:<asp:Label runat="server" Text="Label" ID="label1"></asp:Label>
</div>
</form>
用来测试的后台代码以下。 ajax
protected void OK_Click(object sender, EventArgs e)
{
ListItem[] array = new ListItem[3];
array[0] = bigTypeList.SelectedItem; //为null
array[1] = typeList.SelectedItem; //为null
array[2] = smalltypeList.SelectedItem; //为null
}
事实证实,在服务器端读取客户端填充的DropDownList控件的值时,根本读不到任何内容。DropDownList.Items.Count为0,DropDownList.SelectedItem为null。
那么,怎么获得这个值呢,只好使用Request.Form["控件的客户端ID"]了。以下代码所示。 服务器
string s=Request.Form[typeList.ClientID];
附:页面中的JavaScript文件。
测试
复制代码代码以下:
<script language="javascript" type="text/javascript"> $(function () { var bigId = '#<%=bigTypeList.ClientID%>'; var mediumId = '#<%=typeList.ClientID%>'; var smallId = '#<%=smalltypeList.ClientID%>'; $(bigId).cascadingDropDown(mediumId, '../Services/AutoTypeService.asmx/getAutoType', { valueMember: 'id', displayMember: 'name', cascadingArgName: 'parent' }); $(mediumId).cascadingDropDown(smallId, '../Services/AutoTypeService.asmx/getSubAutoType', { valueMember: 'id', displayMember: 'name', cascadingArgName: 'parent' }); }); </script>