selectize.js 重新加载下拉菜单

Question

我有一个 ID 为 "selectCountry" 的下拉菜单，由 ajax 填充，成功后我只需绑定 Selectize。

$('#selectCountry').selectize({
    create: true,
    sortField: 'text' 
});

当我通过 ajax 重新绑定原始下拉菜单并尝试 reload/rebind 或成功刷新旧的选择自动完成框时，旧列表不会有任何变化。

有什么方法可以重新加载或刷新选择下拉列表吗？我试过 "clearOptions()" 和 "refreshOptions()".

P.S,不想直接绑定selectize from ajax.

好的，现在我在 jsfiddle

上为这个问题添加工作示例

请帮助我 :( 任何建议对我来说都很棒。非常感谢

Answer 1

看起来您还打开了一个 issue on the project，恕我直言，这不是项目问题的良好用法。

我在那里回答了，我会在这里重复回答以防对其他人有用。

您不应从原始标记中重新创建 Selectize 组件。您应该使用它来更新其选项，如您所料使用 clearOptions()，然后使用 addOption()（尽管是单数形式，但它接受数组）。我更新了你的fiddle（制作一个+1）以显示：https://jsfiddle.net/m06c56y0/20/

相关部分是：

var selector;
$('#button-1').on('click', function () {
    selector = $('#select-tools').selectize({
        maxItems: null,
        valueField: 'id',
        labelField: 'title',
        searchField: 'title',
        options: [{
            id: 1,
            title: 'Spectrometer',
            url: 'http://en.wikipedia.org/wiki/Spectrometers'
        }, {
            id: 2,
            title: 'Star Chart',
            url: 'http://en.wikipedia.org/wiki/Star_chart'
        }],
        create: false
    }).data('selectize');
});

$('#button-2').on('click', function () {
    console.log(selector);
    selector.clearOptions();
    selector.addOption([{
            id: 1,
            title: 'Spectrometer',
            url: 'http://en.wikipedia.org/wiki/Spectrometers'
        }, {
            id: 3,
            title: 'Electrical Tape',
            url: 'http://en.wikipedia.org/wiki/Electrical_tape'
        }]);
});

Answer 2

不知如何，我找到了答案及其工作方式 here

只需添加这行代码及其工作。

$('#select-tools').selectize()[0].selectize.destroy();

Answer 3

您也可以这样做：

$('#whateverYouCalledIt').selectize()[0].selectize.clear();

只是为了清除已经 select 编辑的内容。它不会清除您的 select 列表。

selectize.js 重新加载下拉菜单

selectize.js reload dropdown

javascript

jquery

json

autocomplete

selectize.js