I have two ASP.NET dropdownlist controls on a page. The first calls back to the server and obtains an array which is returned to the client and used to populate the second dropdownlist via javascript. However if I make a selection in the second (and newly populated) dropdownlist and then do a postback the selection and contents of the second dropdownlist are lost. This is an issue since I need to obtain the selected value and have the contents of the list retained after the postback.
How do I fix this? I presume it's a matter of updating viewstate at some point before the postback?
The controls I'm populating are ASP.NET dropdownlists. Here is the the javascript I'm using to populate them.
Code being used is as follows (slightly cut down for brevity):
ASP.NET control I'm populating:
<asp:DropDownList ID="ddlStateCounty" runat="server" OnSelectedIndexChanged="ddlStateCounty_OnSelectedIndexChanged" AutoPostBack="true" />
Call back code that obtains comma separated list of values:
public void RaiseCallbackEvent(string eventArgument)
{
return "1, 2, 3";
}
Javascript population code:
function ReceiveServerData(retValue)
{
var statesArray = retValue.split(',');
var statesList = document.getElementById('{0}');
if (statesArray.length > 0 && statesList != null)
{
for (var j = 0; j < statesArray.length; j++)
{
var newOption = document.createElement('OPTION');
statesList.options.add(newOption);
newOption.value = statesArray[j].toString().trim();
newOption.innerText = statesArray[j];
}
}
}