title: Bind the drop down using JQuery
body: <p>This is my aspx coding</p>
  
  <pre><code>  [WebMethod]
      public static CountryDetails[] BindDatatoDropdown()
      {
          DataTable dt = new DataTable();
          List&lt;CountryDetails&gt; details = new List&lt;CountryDetails&gt;();
  
          using (SqlConnection con = new SqlConnection(@"Data Source=DEVSYS;Initial Catalog=Items;Persist Security Info=True;User ID=sa;Password=*****"))
          {
              using (SqlCommand cmd = new SqlCommand("SELECT ItemTypeID,ItemType FROM ItemTypeTable", con))
              {
                  con.Open();
                  SqlDataAdapter da = new SqlDataAdapter(cmd);
                  da.Fill(dt);
                  foreach (DataRow dtrow in dt.Rows)
                  {
                      CountryDetails country = new CountryDetails();
                      country.CountryId = Convert.ToInt32(dtrow["ItemTypeID"].ToString());
                      country.CountryName = dtrow["ItemType"].ToString();
                      details.Add(country);
                  }
              }
          }
          return details.ToArray();
      }
      public class CountryDetails
      {
          public int CountryId { get; set; }
          public string CountryName { get; set; }
      }
  </code></pre>
  
  <p>i want to bind the drop down using Jquery. but my it shows only error alert
  This is my design coding</p>
  
  <pre><code>&lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="jquery.selectboxes.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
      $(document).ready(function () {
          $.ajax({
              type: "POST",
              contentType: "application/json; charset=utf-8",
              url: "WebForm1.aspx/BindDatatoDropdown",
              data: "{}",
              dataType: "json",
              success: function (data) {
                  alert("hi");
                  $.each(data.d, function (key, value) {
                       $("#ddlCountry").append($("&lt;option&gt;&lt;/option&gt;").val(value.CountryId).html(value.CountryName));
                  });
              },
               error: function ajaxError(response) {
              alert(response.status + ' ' + response.statusText);
              }
          });
      });
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;form id="form1" runat="server"&gt;
      &lt;div&gt;
      &lt;asp:DropDownList ID="ddlCountry" runat="server" /&gt;
      &lt;/div&gt;
      &lt;/form&gt;
  </code></pre>
  
  <p>Just i want t bind the item details in drop down while page load. It always show the alert of error. It says 500 internal server error</p>