The client populates the DropDownList control with JavaScript and the server side cannot read the value

  • 2020-05-10 18:01:54
  • OfStack

There is nothing wrong with populating, but the contents of the drop-down table cannot be pulled out on the server side. The page code is as follows.
 
<form id="form1" runat="server"> 
<div> 
<h3> Look at the use js Fill in the dropdownlist Can the control be read on the server side? </h3> 
3 Cascading drop-down list boxes:  
<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=" Read the drop-down table " ID="OK" onclick="OK_Click" /><br /> 
 What you chose is: <asp:Label runat="server" Text="Label" ID="label1"></asp:Label> 
</div> 
</form> 

The code behind the test is as follows.
 
protected void OK_Click(object sender, EventArgs e) 
{ 
ListItem[] array = new ListItem[3]; 
array[0] = bigTypeList.SelectedItem; // for null 
array[1] = typeList.SelectedItem; // for null 
array[2] = smalltypeList.SelectedItem; // for null 
} 

It turns out that when the server side reads the value of the DropDownList control populated by the client side, nothing is read at all. DropDownList.Items.Count is 0, DropDownList.SelectedItem is null.
So, how to get this value, you have to use Request.Form [" client of the control ID"]. This is shown in the following code.
 
string s=Request.Form[typeList.ClientID]; 

Attachment: JavaScript file on page.
 
<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> 

The end.

Related articles: