title: populating dropdown using jquery
body: <p><img src="https://i.stack.imgur.com/O4Aps.png" alt="enter image description here" />I have a web method that returns a list.</p>
  <pre><code>    &lt;WebMethod()&gt; _
  Public Shared Function populateDropdown(ByVal aptdate As Date, ByVal dentistid As Integer) As List(Of String)
      Dim apttime As New List(Of String)
      Try
          apttime = DatabaseLayer.GetAvailableAppointmentTime(aptdate, dentistid)
      Catch ex As Exception
          Throw ex
      End Try
      Return apttime
  End Function
  </code></pre>
  <p>End Class</p>
  <p>I want to populate the dropdown with the above result set</p>
  <p>I am using a jquery ajax function to do so.</p>
  <pre><code>              $.ajax({
                  type: &quot;POST&quot;,
                  url: &quot;Appointment.aspx/populateDropdown&quot;,
                  data: '{aptdate:' + '&quot;' + aptdate + '&quot;' + ',dentistid:' + '&quot;' + dentistid + '&quot;' + ' }',
                  contentType: &quot;application/json; charset=utf-8&quot;,
                  dataType: &quot;json&quot;,
                  success: function (data) {
                      alert(data.d.length);
                      var options = $(&quot;#drpdwnapttime&quot;);
                      $.each(data, function (key,value) {
                      alert(value);
                          options.append($(&quot;&lt;option /&gt;&quot;).val(this.data).text(this.data));
                      });
                  }
              });
  </code></pre>
  <p>However this dosen't seem to work. Value in the alert box is 11, so I assume I am geeting the arrays correctly. The alert in for each shows just one loop and then nothing happens.
  I can't really figure out whats wrong here.
  EDit:
  Changed the code and
  I added an Image of the alert I get inside the $.each. Should't I be getting just one value?</p>