How to preserve dropdown data after postback

Question

I am binding dropdown at client side using Jquery. I am fetching data from server using PageMethods.

html

<asp:DropDownList ID="ddlCountry" runat="server" ClientIDMode="Static" 
                  onchange="return country_changed();" ViewStateMode="Enabled">
</asp:DropDownList> 

JS

function GetCountryLst() {
    PageMethods.GetCountryList(OnsuccessCountry);
    return false;
}

function OnsuccessCountry(result) {
    $("#ddlCountry").append("<option value='Select'>Select</option>");
    for (var eachval in result) {
         $("#ddlCountry").append("<option value='" + result[eachval].id + "'>" + result[eachval].name + "</option>");
    }
    return false;
}

On button click when i write

protected void Button2_Click(object sender, EventArgs e)
{
    var ddlcount = ddlCountry.Items.Count;
}

I get ddlCount = 0; How can i preserve the data

Answer 1

<input type='hidden' id='items' />

function OnsuccessCountry(result) {
    $("#ddlCountry").append("<option value='Select'>Select</option>");
    for (var eachval in result) {
         $("#ddlCountry").append("<option value='" + result[eachval].id + "'>" + result[eachval].name + "</option>");

    $("#items").val($("#items").val() + ";" + result[eachval].id) ;
    }
    return false;
}

And split (with ; ) the value of this hidden field at server side and get count and all items also..

Answer 2

If you are using Page method to fill data you can't get the dropdown list items count from server side. Because it will be cleared when Page_load event happens.