JQuery 选择的插件未显示结果

Question

我正在使用 api 来获取必须填充我的 select 的数据。当我检查 Chrome 中的元素时，我可以看到 select 中充满了选项，但在 <ul class="chosen-results"> 中什么也没有。

我也在使用 Bootstrap，但我从我的代码中删除了它以检查冲突，所以我认为这不是问题所在。

<select name="tags" id="tags" class="chosen-select" multiple data-placeholder="Add tags"></select>

$(document).ready(function () {

    $.getJSON("http://path/to/api", function(data) {
        var option = '';

        for (var i=0; i<data.length; i++){
            option += '<option value="'+ data[i] + '">' + data[i] + '</option>';
        }

        $('#tags').append(option);

    });

    $('#tags').chosen({width: "100%"});
});

我的JSON看起来像这样

[
 "lorem",
 "ipsum",
 "dolor"
]

Answer 1

根据 documentation

If you need to update the options in your select field and want Chosen to pick up the changes, you'll need to trigger the "chosen:updated" event on the field. Chosen will re-build itself based on the updated content.

因此，您可能想告诉插件您已经更新了选项，并通过 ajax 调用将它们全部填入。

$(document).ready(function () {

    $.getJSON("http://path/to/api", function(data) {
        var option = '';

        for (var i=0; i<data.length; i++){
            option += '<option value="'+ data[i] + '">' + data[i] + '</option>';
        }

        $('#tags').append(option);
        // notify the plugin we've updated the options.
        $("#tags").trigger("chosen:updated");

    });

    $('#tags').chosen({width: "100%"});
});