Why Dropdown list data is erasing when I using the "SelectedIndexChanged" Event and initially data is filled by Ajax Method

I have filled the data using Ajax Method [WebMethod] and Data is filling and next I have maintaining all logic from my server side code using SelectedIndexChanged event AutoPostBack="true" and I have used this dropdown control inside the UpdatePanel control in master page MasterPageFile="~/MasterPage.Master" CodeBehind="AutoTrade.aspx.cs"'.

ASP code :-

<asp:ScriptManager ID="scriptmanager" runat="server"></asp:ScriptManager>

<asp:UpdatePanel ID="updatepanel" runat="server">
                    <ContentTemplate>

 <asp:DropDownList ID="AutoTradeTop_expdate" ClientIDMode="Static" AutoPostBack="true" OnSelectedIndexChanged="AutoTradeTop_expdate_SelectedIndexChanged" runat="server" CssClass="form-control">
                                            </asp:DropDownList>

    </ContentTemplate>
                </asp:UpdatePanel>

Ajax code :-

$.ajax({
            type: "POST",
            contentType: "application/json; charset=utf-8",
            //url is the path of our web method (Page name/function name)
            url: "AutoTrade.aspx/PopulateExpDate",
            data: "{}",
            dataType: "json",
            //called on jquery ajax call success
            success: function (result) {
                $('#AutoTradeTop_expdate').empty();
                //$('#AutoTradeTop_expdate').append("<option value='0'>--Select--</option>");
                $.each(result.d, function (key, value) {
                    $("#AutoTradeTop_expdate").append($("<option></option>").val(value.ID).html(value.ExpDate));
                });

            },
            //called on jquery ajax call failure
            error: function ajaxError(result) {
                alert(result.status + ' : ' + result.statusText);
            }
        });

.cs code :-

[WebMethod]
        public static List<AutoTradeExpDateRes> PopulateExpDate()
        {
            List<AutoTradeExpDateRes> autoTradeExpDateRes = new List<AutoTradeExpDateRes>();

            try
            {
                

                string expdateres = GetAPIResponse("ssss://xxx.com/fns.aspx?otype=analyse_expdate&uid=" + "62" + "&symbol=" + "nifty" + "&instrument=" + "ce" + "");
                var expdatelst = JsonConvert.DeserializeObject<List<AutoTradeExpDateRes>>(expdateres);

                
                if (!ReferenceEquals(expdatelst, null) && expdatelst.Count > 0)
                {
                    for (int i = 0; i < expdatelst.Count; i++)
                    {
                        autoTradeExpDateRes.Add(new AutoTradeExpDateRes
                        {
                            ID= i,
                            ExpDate = Convert.ToString(expdatelst[i].ExpDate)
                        });;
                    }

                }

                return autoTradeExpDateRes;

            }
            catch (Exception)
            {
                throw;
            }
        }

When I run this above code I'm getting the output Example Image :-

But when I use codebehind SelectedIndexChanged event and select any one of the list vale from the dropdown list (the data is erasing)

protected void AutoTradeTop_expdate_SelectedIndexChanged(object sender, EventArgs e)
        {

        }

The dropdown list data is erasing example img

Note :- I know we can handle this data functionality by using this client side onchange event but my question can I handle this ajax filled data from server side ? (once event SelectedIndexChanged is triggering the data is erasing )

So I want to keep the data using this SelectedIndexChanged event without data erasing and my next functionality should work. Please suggest me how can I achieve this. And what are the possible ways.

(The main reason I'm asking this question is initially my dropdown data should load (I wrote ajax call for that) and next if I change any dropdown value my next functionality should work (dependency is there to another dropdown list) so if I write the onchange event for clientside I need to write the 'Ajax' call for that and should fetch data form 'WebMethod' codebehind (should write one for loop) and next that return list data should fetch and write another for loop in ajax call to avoid this repeat logic can we handle from codebehind like my above question.)