FILL ASP.NET DROPDOWN CONTROL FROM JQUERY

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 TOOLh4>td>
tr>
<tr>
<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>
Number of pages <div id="PageNum"> div>
div>--%>
td>
tr>
<tr>
<td class="text-center">
<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 Radetbutton>
<button type="submit" class="btn btn-danger " id="btn_Reset" runat="server" onserverclick="btn_Reset_Click">Clearbutton>
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 :

"Scripts/js/jquery-3.4.1.min.js">
"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('---Please select state---');
//for (var i = 0; response.d.length; i++) {
// ddropState.append($(''));
//}
$.each(response.d, function (key, value) {
ddropState.append($("").val(value.id).html(value.StateName));
});
},
failure: function (e) {
alert("Failed: " + e.d);
}
});//--- AJAX
});

Also, my web services to load from database

Namespace:="http://tempuri.org/")> _
_
_
Public Class WebService_Defaulters
Inherits System.Web.Services.WebService
Dim GC As New GetConnection()
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

3 Replies

Know the answer? Post it — somebody with the same question will find it here.

Dinesh Gabhane6y ago
Accepted answer
Try to use below code, it might help you
$.each(response.d, function (key, value) {

   var newOption = "+ value.id +"'>"+value.StateName+"";
   $("#ddropState").append(newOption);

});
Dinesh Gabhane6y ago
Great. Happy to help
Cheers
Abraham Olatubosun6y ago
many thanks Dinesh, your solution worked applying with a little tweak did the magic. Thanks again to all my Coding gurus