FILL ASP.NET DROPDOWN CONTROL FROM JQUERY

Question

My Dear Gurus,

Hope this message meets you all in good health, I know topic like may have been answered, due to time line of the project made me to ask again, may be the answer may also add to helping someone too.

I am trying to load data into a asp.net dropdown control via Jquery AJAX, find below my HTML code:

 

<table class="auto-style1">
      <tr>
          <td> </td>
          <td class="auto-style2"> </td>
          <td> </td>
      </tr>
      <tr>
          <td> </td>
          <td class="auto-style2">

              <table class="auto-style1 table ">
                  <tr>
                      <td class="text-capitalize text-center bg-primary"><h4>RADET GENERATING TOOL</h4></td>
                  </tr>
                  <tr>
                      <!-- OnSelectedIndexChanged="DrpState_SelectedIndexChanged" -->
                      <td class="text-center">State Name  :<asp:DropDownList ID="DrpState" runat="server" AutoPostBack="False"  Width="30%">
                          </asp:DropDownList>
                      </td>
                  </tr>
                  <tr>
                      <td class="text-center">
                                  Facility Name  :<asp:DropDownList ID="DrpFacName" runat="server" Width="30%">
                                  </asp:DropDownList>
                      </td>
                  </tr>
                  <tr>
                      <td class="text-center">

                          Current Date : <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
                      </td>
                  </tr>
                  <tr>
                      <td style="text-align: center" colspan="2">

                         <%-- <div id="progressbar" class="progressBar">
                               <span id="progressbar-Text" class="progressBarText">Processing ......</span>
                            </div>
                          <div>
                              <!-- Display number of pages -->
                              Number of pages  <div id="PageNum"> </div>
                         </div>--%>

                      </td>
                  </tr>
                  <tr>
                      <td class="text-center">

                           <!-- Call by JQUERY -->
                            <button id="btnhide" class="btn btn-primary" type="button" disabled>
                             <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
                                    Executing.....
                           </button>

                          <!--  -->
                          <button type="submit" class="btn btn-info has-spinner" id="btn_RADET" runat="server" onserverclick="btn_RADET_Click"  >Generate Radet</button>
                          <button type="submit" class="btn btn-danger " id="btn_Reset" runat="server" onserverclick="btn_Reset_Click">Clear</button>
                      </td>
                  </tr>
                  <tr>
                      <td> </td>
                  </tr>
                  <tr>
                      <td> </td>
                  </tr>
              </table>

          </td>
          <td> </td>
      </tr>
      <tr>
          <td> </td>
          <td class="auto-style2"> </td>
          <td> </td>
      </tr>
  </table>

 And my jquery Ajax code :

<script src="Scripts/js/jquery-3.4.1.min.js"></script>


    <script type="text/javascript">
        $(function ()
        {

                  $.ajax({
                        type: "POST",
                        url: "WebService_Defaulters.asmx/GetSate",
                        data: '{}',
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        success: function (response) {

                            var ddropState = $("#DrpState");
                              ddropState.empty();
                              ddropState.append('<option selected="selected" value="0">---Please select state---</option>');
                              //for (var i = 0; response.d.length; i++) {
                              //    ddropState.append($('<option>'+response.d[i]+'</option>'));
                              //}
                              $.each(response.d, function (key, value) {
                                  ddropState.append($("<option></option>").val(value.id).html(value.StateName));
                              });
                        },
                      failure: function (e) {

                          alert("Failed: " + e.d);
                      }
                  });//--- AJAX
            });

Also, my web services to load from database

<System.Web.Script.Services.ScriptService()>
<WebService(Namespace:="http://tempuri.org/")> _
<WebServiceBinding(ConformsTo:=WsiProfiles.BasicProfile1_1)> _
<Global.Microsoft.VisualBasic.CompilerServices.DesignerGenerated()> _
Public Class WebService_Defaulters
    Inherits System.Web.Services.WebService

    Dim GC As New GetConnection()

<WebMethod()>
    Public Sub GetSate()   'As List(Of String)
        Dim SQL As String = "SELECT distinct state FROM New_States order by state"
        Dim DCL As List(Of StateClass) = New List(Of StateClass)()
        Dim i As Int32 = 1
        Dim DD As New DataTable()
        DD = GC.GetSQL(SQL)
        For Each r In DD.Rows
            Dim DCLs As New StateClass()
            DCLs.id = i
            DCLs.StateName = r!State.ToString().Trim()
            i += 1
            DCL.Add(DCLs)
        Next
        Dim Js As New JavaScriptSerializer()
        Context.Response.Write(Js.Serialize(DCL))
        'Return DCL
    End Sub

End Class

 

All attempt to get to work faild I have tried all sample in google search not fruitful result

That is why I came to you my guru’s to help me.

Thank you in advance