Question

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 response.getWriter().write(json); 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

customer.jsp

$(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) {
      $('>option', dd).remove(); // Remove all the previous option of the drop down
      if (opts) {
        $.each(opts, function(key, value) {
            dd.append($('<option/>').val(key).text(value));
          }
        }
      });
  }

down where the drop down list is generated

<select id="customer" name="customer">  
    <option></option>  
</select>

The result is nothing get populated into the list. So sad

Answer 1

I think you are invoking the wrong function in document ready

Shouldn’t it be

getInitialOption('customer');

instead of

getCustomerOption('customer');