Cannot make empty a dropdownlist

See more:

C#

ASP.NET

Hello,
i have 2 dropdown lists:

1- ddlCity: that display all cities in the database
2-ddlBranch:display all branches per city.

So once i select a city, related branches should be selected.

and i have a method in C# source code that clear my form which contains the 2 dropdownlists. So once i click on the "Clear" button, the 2 dropdown list should be empty:

1-ddlcity display: "--Select--"
2-ddlBranch display: "----"

Now the problem is that When i click on the button "Clear" an error message occurs: "

'ddlBranch' has a SelectedValue which is invalid because it does not exist in the list of items.
Parameter name: value

Please I need your help and thank you in advance.

Asp. Net Code:

 <asp:DropDownList ID="ddlCity" runat="server" Width="170px" 
        DataSourceID="tblCity" DataTextField="city" DataValueField="cityID" AutoPostBack="true" AppendDataBoundItems="true"
        onselectedindexchanged="ddlCity_SelectedIndexChanged">
        <asp:ListItem Text="--Select--" Value=""></asp:ListItem>

 <asp:SqlDataSource ID="tblCity" runat="server" ConnectionString="<%$ ConnectionStrings:SmartBookingEngineConn %>" SelectCommand="SELECT [cityID],[city] FROM [tblCity]"></asp:SqlDataSource>
 
<asp:DropDownList ID="ddlBranch" runat="server" Width="170px" AutoPostBack="true" 
        onselectedindexchanged="ddlBranch_SelectedIndexChanged"  >
         <asp:ListItem Text="----" Value="" Selected="True"></asp:ListItem>
    </asp:DropDownList>

<telerik:RadAjaxManagerProxy ID="rp"  runat="server">              
</telerik:RadAjaxManagerProxy>

C# code:

  protected void Page_Load(object sender, EventArgs e)
  {
 if (!IsPostBack)
                {
                                       
                    // dropdown branches per city load
                   
                    ddlCity.DataBind();
                    if (ddlCity.SelectedValue !="")
                    {
                    dtbranch = null;
                    string selectedIDCity = ddlCity.SelectedValue;
                    string mysqlSelectBranch = "select Branch,CityID,BranchID      from viewBranchPerCity where CityID=" + selectedIDCity;
                    dtbranch = db.sqlServer.SelectRecord(mysqlSelectBranch);
                    ddlBranch.DataSource = dtbranch;
                    ddlBranch.DataValueField = "BranchID";
                    ddlBranch.DataTextField = "Branch";
                    }
                    ddlBranch.DataBind();

                }
rp.AjaxSettings.AddAjaxSetting(ddlCity, ddlBranch, RadAjaxLoadingPanel1);

  }

protected void btnClear_Click(object sender, EventArgs e)
        {
                      clearForm();
        }

protected void clearForm()
       {
           ddlCity.Enabled = true;
           ddlBranch.Enabled = true;

           ddlCity.SelectedValue = string.Empty;
           ddlBranch.SelectedValue = string.Empty;
       }
protected void ddlCity_SelectedIndexChanged(object sender, EventArgs e)
        {
            dtbranch = null;
            string selectedIDCity = ddlCity.SelectedValue;
            string mysqlSelectBranch = "select Branch,CityID,BranchID from viewBranchPerCity where CityID=" + selectedIDCity;
            dtbranch = db.sqlServer.SelectRecord(mysqlSelectBranch);
            ddlBranch.DataSource = dtbranch;
            ddlBranch.DataValueField = "BranchID";
            ddlBranch.DataTextField = "Branch";
            ddlBranch.DataBind();
        }