Динамически генерировать содержимое выпадающего списка с помощью jQuery

Question

Я новичок в Javascript, JSON и jQuery. Поэтому, пожалуйста, будьте осторожны со мной. У меня есть страница JSP, которая содержит раскрывающийся список. Содержимое раскрывающегося списка заполняется при загрузке страницы. Я написал сервлет, который возвращает содержимое выпадающего списка в виде карты, преобразовал его в строку JSON и отправил обратно в jsp через response.getWriter().write(json);. Однако у меня возникли проблемы с получением результата обратно со стороны jsp и заполните содержимое выпадающего списка из результата. Вот мои коды

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>  

В результате ничего не заполняется в списке. Так грустно

Answer 1

Я думаю, что вы вызываете неправильную функцию в готовом документе

Не должно ли быть

getInitialOption('customer');

вместо

getCustomerOption('customer');

Answer 2

Я не понимаю $ (''), но я не уверен, что это тоже проблема, трудно сказать точно.

Я знаю, что будет быстрее, если вы создадите список опций в памяти, а затем добавите один с помощью .html (опций) вместо того, чтобы добавлять их по одному. Это также может облегчить понимание: создать HTML-файл по одной строке за раз, а затем добавить его.

Answer 3

Вы можете добавить дополнительные <option> элементы к <select> с кодом:

$("#selectID").append("<option>" + text + "</option>");

см .: Документы JQuery