[Solved] jQuery AJAX DropDownList not working with large data in ASP.Net

I used your link "http://www.aspsnippets.com/Articles/AJAX-Cascading-DropDownList-using-jQuery-in-ASP.Net.aspx"

and implement in my Project your code is working but error is

I have 4 columns in database country, States, City and Area

in the area table 991 recordes are exists I am binding area onchange of City dropdown but records is not binding only showing loadding than I changed my storeprocedure write qurey to select top 673 records now area is binding but if I remove "top" from select its showing loading in area dropdown.

how can I solve this issue

<script type="text/javascript">
        function PopulateArea() {
            $("#<%=ddlArea.ClientID%>").attr("disabled", "disabled");
            if ($('#<%=ddlCity.ClientID%>').val() == "0") {                
                $('#<%=ddlArea.ClientID %>').empty().append('<option selected="selected" value="0">Please select</option>');
            }
            else {
                $('#<%=ddlArea.ClientID %>').empty().append('<option selected="selected" value="0">Loading...</option>');
                $.ajax({
                    type: "POST",
                    url: pageUrl + '/PopulateArea',
                    data: '{CityId: ' + $('#<%=ddlCity.ClientID%>').val() + '}',
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: OnAreaPopulated,
                    failure: function (response) {
                        alert(response.d);
                    }
                });
            }
        }

        function OnAreaPopulated(response) {
            PopulateControl(response.d, $("#<%=ddlArea.ClientID %>"));
        }
    </script>
    <script type="text/javascript">
        function PopulateControl(list, control) {
            if (list.length > 0) {
                control.removeAttr("disabled");
                control.empty().append('<option selected="selected" value="0">Please select</option>');
                $.each(list, function () {
                    control.append($("<option></option>").val(this['Value']).html(this['Text']));
                });
            }
            else {
                control.empty().append('<option selected="selected" value="0">Not available<option>');
            }
        }
    </script>

<asp:DropDownList ID="ddlCity" runat="server" onchange="PopulateArea();">
                        <asp:ListItem Text="Please select" Value="0"></asp:ListItem>
                    </asp:DropDownList>

<asp:DropDownList ID="ddlArea" runat="server">
                        <asp:ListItem Text="Please select" Value="0"></asp:ListItem>
                    </asp:DropDownList>
public static ArrayList PopulateArea(int CityId)
        {
            ArrayList list = new ArrayList();
            list = CountryDL.SelectAllCityAreaByCityId(CityId);
            return list;
        }

ALTER Procedure [dbo].[sp_CityArea_SelectAll]  
(  
@CityId bigint=0  
)  
As  
Begin  
 Select
 --Select TOP 673
  [CityId],  
  [AreaID],  
  [Area]  
 From CityArea  
 Where CityId=@CityId  ORDER BY AREA ASC
End