Changing Text Box to List Drop down gives "Invalid postback or callback argument" error

Question

I have form which was built on Asp.Net platform. This form works as expected whe we enter entry as text for both Country and State and I can submit the data to the database. Now I need to change the code with the logic to have drop down for Country and State. Example: If United States is selected it shows related states and user need to select the entry from drop down and submit the form and it should save it in database. I haven't changed anything in code behind in the working code, just adding the list drop down instead of Text entry for both Country and State. I am getting error "Invalid postback or callback argument" when I click the Submit button for submission. I have included the working code with text box entry and the change I have done by replacing with the list drop down. I have also included the error detail I am getting. Looking at other postings on stackoverflow, I added enableEventValidation="false" in .aspx page, but it didn't solve the issue. Any idea how can I resolve this?

.aspx Code with Text box field: (This is working)

<tr>
  <td><div align="right"><span class="style4">*</span> State:</div><asp:RequiredFieldValidator id="reqstate" ControlToValidate="state" ErrorMessage="Required Field!" runat="server" /></td>
  <td><asp:TextBox runat="server" name="state" type="text" id="state" size="30" /></td>
</tr>
<tr>
  <td><div align="right"><span class="style4">*</span> Country:</div><asp:RequiredFieldValidator id="reqcountry" ControlToValidate="country" ErrorMessage="Required Field!" runat="server" /></td>
  <td><asp:TextBox runat="server" name="country" type="text" id="country" size="30" /></td>
</tr> 

Changed .aspx Code with List Drop Down: (This is not working)

<tr>
  <td><div align="right"><label id="stateLabel" style="display: none"><span class="style4">*</span> State:</label></div><asp:RequiredFieldValidator id="reqstate" ControlToValidate="state" ErrorMessage="Required Field!" runat="server" /></td>
  <td><asp:ListBox name="state" id="state" style="display: none" rows="1" runat="server"></asp:ListBox></td>
</tr>
<tr>
  <td><div align="right"><span class="style4">*</span> Country:</div><asp:RequiredFieldValidator id="reqcountry" ControlToValidate="country" ErrorMessage="Required Field!" runat="server" /></td>
  <td>           
   <asp:ListBox id="country" onchange="javascript:countryChange()" rows="1" runat="server">
                <asp:ListItem selected="false">Select Country</asp:ListItem>
                <asp:ListItem>United States</asp:ListItem>
                <asp:ListItem>Canada</asp:ListItem>
   </asp:ListBox>       
  </td>
</tr>



<!--Country and State Change Javascript-->
<script>
function countryChange() {
    var countryState = [
        [
            'US', [
            ['', 'State/Province'],
            ['AL', 'Alabama'],
            ['AK', 'Alaska'],
            ['AZ', 'Arizona'],
            ['AR', 'Arkansas'],
  ], ],
[
            'CA', [
            ['', 'State/Province'],
            ['AB', 'Alberta'],
            ['BC', 'British Columbia'],
            ['MB', 'Manitoba'],
            ['NB', 'New Brunswick'],
  ]]
   ];

    var countryElement = document.getElementById('countryId');
    var stateElement = document.getElementById('stateId');
    var stateLabelElement = document.getElementById('stateLabel');

if (countryElement && stateElement) {
        var listOfState = [
            ['XX', 'None']
        ];

        var currentCountry = countryElement.options[countryElement.selectedIndex].value;
        for (var i = 0; i < countryState.length; i++) {
            if (currentCountry == countryState[i][0]) {
                listOfState = countryState[i][1];
            }
        }
        if (listOfstate.length < 2) 
            {
            stateElement.style.display = 'none';
            stateLabelElement.style.display = 'none';
            }
    else 
        {
        stateElement.style.display = 'inline';
        stateLabelElement.style.display = 'inline';
        }
        var selectedState;
        for (var i = 0; i < stateElement.length; i++) {
            if (stateElement.options[i].selected === true) {
                selectedState = stateElement.options[i].value;
            }     
        }
        stateElement.options.length = 0;
        for (var i = 0; i < listOfState.length; i++) {
            stateElement.options[i] = new Option(listOfState[i][1], listOfState[i][0]);
            if (listOfState[i][0] == selectedState) {
                stateElement.options[i].selected = true;
            }    
        }      
    }
}
</script>

Error I am getting:

Invalid postback or callback argument. Event validation is enabled using in configuration or <%@ Page EnableEventValidation="true" %> in a page. For security purposes, this feature verifies that arguments to postback or callback events originate from the server control that originally rendered them. If the data is valid and expected, use the ClientScriptManager.RegisterForEventValidation method in order to register the postback or callback data for validation.