Question

我正在使用api来获取必须填充我的选择的数据。当我在Chrome中检查元素时，我可以看到选项填充了选项，但在<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

如果您需要更新选择字段中的选项并希望选择选择更改，则需要在该字段上触发“selected：updated”事件。 Chosen将根据更新的内容重新构建自己。

因此，您可能想告诉插件您已经更新了从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%"});
});

JQuery Chosen插件没有显示结果

1 个答案: