selectize.js重新加载下拉列表

时间:2015-05-26 12:00:07

标签: javascript jquery json autocomplete selectize.js

我有一个带有ID" selectCountry"的下拉列表由ajax和成功填补我只是绑定Selectize。

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

当我通过ajax重新绑定原始下拉列表并尝试重新加载/重新绑定或刷新旧的选择性自动完成框时,旧列表中没有任何更改。

有没有办法重新加载或刷新选择下拉列表?我试过" clearOptions()"和" refreshOptions()"。

P.S,我不想直接绑定ajax的选择。

好的,现在我在jsfiddle

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

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

3 个答案:

答案 0 :(得分:14)

如何,我找到了答案及其工作here

只需添加此行代码及其工作原理。

foreach ($array_cat as $item) {
    foreach ($item as $company_display) {
       echo $company_display['category']['company']['name'];
    }
}

答案 1 :(得分:7)

看起来你还打开了issue on the project,这不是恕我直言,很好地利用了项目的问题。

我在那里回答,我会在这里重复这个答案,以防它对其他人有用。

您不应该从原始代码中重新创建Selectize组件。你应该使用它来更新它的选项,使用你猜到的clearOptions(),然后addOption()(尽管它是单数,它接受一个数组)。 我更新了您的小提琴(制作一个+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'
        }]);
});

答案 2 :(得分:2)

你也可以这样做:

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

仅清除已选择的内容。它不会清除您的选择列表。