Как обновить выпадающий список в JQuery без использования selectmenu ('refresh')?

Question

Я хочу обновить выпадающий список (выбрать) после получения ответа от сервера. Как я могу это сделать? Я использую jquery.js (версия 2.1.3). И это мой HTML-код,

<div class="col-md-8"> 
    <Select id="dd" class="form-control"> 
     <option value="0"> List </option> 
     {{#each listValue}} 
      <option value="{{value}}"> {{text}}</option> 
     {{/each}} 
    </Select> 
</div> 

В приведенном выше коде, значение listValue будет получена с сервера. Таким образом, список необходимо обновить, если значение изменяется на сервере. Я получаю обновленный список с сервера. Но я не знаю, как обновить выпадающее меню. Значение на сервере будет обновлено при добавлении записи. Я хочу обновить раскрывающийся список, когда будет добавлена ​​запись.

Чтобы добавить запись, у меня есть кнопка рядом с моим выпадающим списком. Когда эта кнопка будет нажата, появится модальное значение для ввода значения. После нажатия кнопки «Добавить» в модале введенное значение будет добавлено на сервере. После успешного добавления записи я отправляю HTTP-запрос для получения обновленных значений.

И это код, чтобы получить обновленные значения в моем файле JS,

MyModule.responseList = function(res){ 
    var listValue = res.content; 
    //What should I do here to refresh the dropdown with this listValue 
} 

listValue будет так,

listValue содержит обновленные значения. Теперь я просто хочу обновить выпадающее меню с этим значением. Я искал в google, чтобы обновить раскрывающийся список в jQuery. Почти все решения предложили использовать selectmenu ('refresh').

Но я хочу обновить список, не используя selectmenu('refresh'), так как я не использую jquery-ui.js. Есть ли способ сделать это?

Answer 1

Согласно с подробной информацией вы прилагается, вы можете обновить <select> так:

MyModule.responseList = function(res){ 
    var listValue = res.content; 
    var $select = $('select#dd'); 
    $select.empty(); //remove all current options 

    // iterate through new options 
    for(var i = 0; i < listValue.length; i++) { 
     // create a new option 
     var option = $('<option/>').attr('value', listValue[i].value).text(listValue[i].text); 
     $select.append(option); // append new options 
    } 
}