Problem in Postback when using cascading dropdowns using jquery

See more:

ASP.NET

Hello friends,

In my web page which uses master page, I have following dropdowns

1. ddlGEO<br />
2. ddlVC

In page load I'm filling the ddlGEO.
I'm populating ddlVC using JQuery through following code

<script>
       $(document).ready(function () {

       });
       function fillVC() {
           try {
               var objGEO = document.getElementById('<%= ddlGeo.ClientID %>');  //$("#hdnEmpNo").val();
               var objGEOValue = objGEO.value; 
               var objHdn = document.getElementById('<%= hdnEmpNo.ClientID %>');  //$("#hdnEmpNo").val();
               var objHdnValue = objHdn.value;
               $.ajax({
                   type: "POST",
                   url: "FWB_DUOverhead.aspx/strgetVC",
                   data: "{strGEO: '" + objGEOValue + "', intEmpNo: '" + objHdnValue + "'}",
                   contentType: "application/json; charset=utf-8",
                   dataType: "json",
                   success: function Success(response) {
                       var result = response.d;
                       var objVC = result.split(";");
                       var VClength = objVC.length;
                       //document.getElementById('imgLoader').style.display = "block";
                       if (VClength > 0) {
                           try {
                               var ddlVC = document.getElementById('<%= ddlVC.ClientID %>');
                               var option = document.createElement("option");
                               ddlVC.options.length = 0;
                               option.value = 0;
                               option.text = "- Select -";
                               ddlVC.options.add(option);

                               for (var i = 0; i < VClength - 1; i++) {
                                   var objVCDetails = objVC[i].split('|');
                                   var VCDetailsLength = objVCDetails.length;

                                   var option = document.createElement("option");
                                   option.value = objVCDetails[0];
                                   option.text = objVCDetails[1];
                                   ddlVC.options.add(option);
                               }
                               //document.getElementById('imgLoader').style.display = "none";
                           }
                           catch (e) { alert(e); }
                       }
                   },
                   error: function (data, status, jqXHR) {
                       alert('There was an error.');
                   }
               });
           }
           catch (e) {
               alert(e);
           }
       }
   </script>

I call this javascript function in following way:

<asp:DropDownList ID="ddlGeo" runat="server" Width="100px" 
                     onChange="fillVC();">
                </asp:DropDownList>

Problem:
On ddlVC selected index change I'm filling the grid

Error:
Invalid postback or callback argument. Event validation is enabled using <pages enableEventValidation="true"/> 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.

Solution Tried:
<%@ Page EnableEventValidation="false" %>

Result:
Postback does not happen, grid does not getting filled and the ddlVC gets clear

Any idea how to overcome this problem?

Thanks in advance