title: JQuery: Populate HTML dropdown menu with JSON
body: <p>I know this questions been asked before, I've read other posts and couldn't get it to work.</p>
  
  <p>I'm trying to populate a drop down menu with JSON data but I'm having some issues, the drop down appears on my html page but theres nothing in the drop down, not even the "Please Select". Below is my code, do you see any problems with it.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;select id="dropDown"&gt;
      &lt;/select&gt;
  </code></pre>
  
  <p><strong>JavaScript</strong></p>
  
  <pre><code>$(document).ready(function () {
      $.ajax({
          url: 'http://localhost/api/Dynamic?database=',
          dataType: 'Json',
          success: function (results) {
              var $el = $("#dropDown");
              $el.empty(); // remove old options
              $el.append($("&lt;option&gt;&lt;/option&gt;")
                      .attr("value", '').text('Please Select'));
              $.each(results, function (index, value) {
                  $el.append($("&lt;option&gt;&lt;/option&gt;")
                          .attr("value", value).text(value));
              });
          }
      });
  });
  </code></pre>
  
  <p><strong>JSON</strong></p>
  
  <pre><code>["Item1","Item2","Item3","Item4"]
  </code></pre>