I have the code below populating a dropdownlist of countries, i'm calling this code in page_load of a .ascx usercontrol.

 private void PopulateCountries()
    {
        var countries = new List<Country>();
        countries = Datasources.GetCountries()
                                        .Where(p => p.Active && !string.IsNullOrWhiteSpace(p.Country_ISO_Code))
                                        .OrderBy(p => p.Country_Name).ToList();
        ddlCountry.DataSource = countries;
        ddlCountry.DataTextField = "Country_Name";
        ddlCountry.DataValueField = "Country_ID";
        ddlCountry.DataBind();
    }
    

In the same page_load, i'm also calling the below code to populate sites in the selected country.

 private void PopulateSites(int countryId)
    {
        try
        {
            myData = Datasources.GetSitesAvailable();
            ddlSite.DataSource = myData.Where(p => p.Active && p.CountryId == countryId).OrderBy(p => p.SiteName));
                ddlSite.DataTextField = "SiteName";
                ddlSite.DataValueField = "SiteId";
            
        }
        catch (Exception exception)
        {
            lblError.Text = exception.Message;
            return;
        }
    }

Below is my Page_Load

    protected void Page_Load(object sender, EventArgs e)
    {
        PopulateCountries();

        int countryId;
        int.TryParse(ddlCountry.SelectedValue, out countryId);
        PopulateSites(countryId);
    }

The challenge i'm facing is that i don't want to set AutoPostBack="True" on ddlCountry. I wan't to refresh ddlSite with sites for the selected country purely in Javascript.

I want to do something like ddlCountry.Attributes["onchange"], then get the selected country and refresh dropdownlist "ddlSite".

Does any body know how best i can solve this?