title: Append to DropDownList by return value of jQuery.Ajax
body: <p>I have 2 DropDownList, like Master-Slave.
  This is my Default.aspx:</p>
  
  <pre><code>&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head runat="server"&gt;
      &lt;title&gt;&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;form id="form1" runat="server"&gt;
      &lt;div&gt;
          &lt;table&gt;
              &lt;tr&gt;
                  &lt;td&gt;
              &lt;asp:Label ID="MsLbl" runat="server" Text="Groups" /&gt;
                  &lt;/td&gt;
                  &lt;td&gt;
              &lt;asp:DropDownList ID="Masterddl" runat="server"&gt;
                      &lt;asp:ListItem Text="G1" Value="G1" /&gt;
                      &lt;asp:ListItem Text="G2" Value="G2" /&gt;
                      &lt;asp:ListItem Text="G3" Value="G3" /&gt;
              &lt;/asp:DropDownList&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;
              &lt;asp:Label ID="Svlbl" runat="server" Text="Members" /&gt;
              &lt;/td&gt;
                  &lt;td&gt;
              &lt;asp:DropDownList ID="Slaveddl" runat="server" /&gt;
              &lt;/td&gt;
              &lt;/tr&gt;
          &lt;/table&gt;
      &lt;/div&gt;
      &lt;/form&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>And this is my Script:</p>
  
  <pre><code>$(document).ready(function () {
  $('select#Masterddl').change(function () {
      MasterChangeHandler($(this).val());
  });
  
  function MasterChangeHandler(Value) {
      $.ajax({
          type: 'Post',
          url: 'MasterSlaveHandler.ashx',
          dataType: "text",
          data: 'ItemSelected=' + Value,
          async: 'true',
          success: function (data) { SuccessHandler1(data); }
  
      });
  }
  
  
  function SuccessHandler1(data) {
      $('select#Slaveddl').empty();
      $.each(data, function (i, slaveValue) {
          $('select#Slaveddl').append(
      $('&lt;option&gt;&lt;/option&gt;').val(slaveValue.Value).html(slaveValue.Text)
      );
      });
  }
  </code></pre>
  
  <p>And My Handler:</p>
  
  <pre><code>public class SlaveValues {
      public string Value { get; set; }
      public string Text { get; set; }
  }
  
  
  public class MasterSlaveDropDownListsHandler : IHttpHandler {
      public bool IsReusable {
          get { return true; }
      }
  
      public void ProcessRequest(HttpContext context) {
          string valueSelected = context.Request["ItemSelected"];
          List&lt;SlaveValues&gt; slaveValues = new List&lt;SlaveValues&gt;();
          SlaveValues sv;
  
          sv = new SlaveValues();
          sv.Text = "SV1";
          sv.Value = valueSelected + "s1";
          slaveValues.Add(sv);
  
          sv = new SlaveValues();
          sv.Text = "SV2";
          sv.Value = valueSelected + "s2";
          slaveValues.Add(sv);
  
  
          string responseText =
      Newtonsoft.Json.JsonConvert.SerializeObject(slaveValues);
          context.Response.ContentType = "text/json";
          context.Response.Write(responseText);
      }
  }
  </code></pre>
  
  <p>but there is nothing to append. 
  Also I see the response in firebug windows as following(when I Select G2 from Master ddl):</p>
  
  <pre><code>[{"Value":"G2s1","Text":"SV1"},{"Value":"G2s2","Text":"SV2"}]
  </code></pre>
  
  <p>and finally I change my success method of script with this new one for test:</p>
  
  <pre><code>function SuccessHandler2(data) {
      $('select#Slaveddl').empty();
      $.each(data, function (i, slaveValue) {
          $('select#Slaveddl').append(
      $('&lt;option&gt;&lt;/option&gt;').val('Member' + i).html('Member' + i)
      );
      });
  }
  </code></pre>
  
  <p>when try this new script the binding to Slave ddl work correctly but with some additional items : the index show member0 to member30 and I don' know why.</p>
  
  <p>Edit1:
  I also try this one and append correctly:</p>
  
  <pre><code>function SuccessHandler3(data) {
  var values = [{ "Value": "G2s1", "Text": "SV1" }, { "Value": "G2s2", "Text": "SV2"}];
          $('select#Slaveddl').empty();
          $.each(values, function (i, slaveValue) {
              $('select#Slaveddl').append(
  $('&lt;option&gt;&lt;/option&gt;').val('Member' + slaveValue.Value).html('Member' +
   slaveValue.Text)
          );
          });
      }
  </code></pre>
  
  <p>So I think there is a problem with manipulate of return value (data).</p>
  
  <p>for more specific view the following pic is the JSON tab in firebug windows when I select G3 in Master ddl:</p>
  
  <p><img src="https://i.stack.imgur.com/8lpvU.jpg" alt="JSON Tab in firebug"></p>
  
  <p>Edit2:</p>
  
  <p>Also I try this one and just the first alert appear, apparently the (data.d) is null or unknown object:</p>
  
  <pre><code>function SuccessHandler6(data) {
      var selection = $('select#Slaveddl');
      $(selection).children().remove();
      alert('in handler and remove children correctly');
      if (data.d) {
          alert('data.d is not null');
          $(data.d).each(function (index, item) {
  
  $(selection).append('&lt;option&gt;').val(item.Value).html(item.Text);
              alert('after append in index: ' + index);
          });
      }
  }
  </code></pre>
  
  <p><strong>How can I use return value correctly and append to Slave ddl? Where is the problem?</strong></p>