title: Dynamically generate the content of Drop Down list via jQuery
body: <p>I am new to Javascript, JSON and jQuery. So please be easy on me. I have a JSP page that contain a drop down list. The contents of the drop down list are populated when the page is loaded. I wrote a Servlet that return the contain of the drop down list in the form of Map, and convert it to JSON string and sent back to the jsp via <code>response.getWriter().write(json);</code> However I am having trouble to getting the result back from the jsp side, and populate the contain of the drop down list from the result. Here are my codes  </p>
  
  <p><code>customer.jsp</code>  </p>
  
  <pre><code>$(document).ready(function() {
    getCustomerOption('customer'); //try to pre-populate the customer drop down list
  });
  
  function getCustomerOption(ddId) {
    var dd = $('#' + ddId);
    $.getJSON("http://localhost:8080/WebApps/DDListJASON", function(opts) {
        $('&gt;option', dd).remove(); // Remove all the previous option of the drop down
        if (opts) {
          $.each(opts, function(key, value) {
              dd.append($('&lt;option/&gt;').val(key).text(value));
            }
          }
        });
    }
  </code></pre>
  
  <p><code>down where the drop down list is generated</code>  </p>
  
  <pre><code>&lt;select id="customer" name="customer"&gt;  
      &lt;option&gt;&lt;/option&gt;  
  &lt;/select&gt;
  </code></pre>
  
  <p>The result is nothing get populated into the list. So sad</p>