如何在不使用 selectmenu('refresh') 的情况下刷新 JQuery 中的下拉列表？

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
    }
}