selectize.js 重新加载下拉菜单

Posted 2023-03-05

【中文标题】selectize.js 重新加载下拉菜单

【英文标题】：selectize.js reload dropdown

【发布时间】：2015-08-08 02:13:54

【问题描述】：

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

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

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

有没有办法重新加载或刷新选择下拉菜单？我试过“clearOptions()”和“refreshOptions()”。

P.S，我不想直接从ajax绑定selectize。

好的，现在我在 jsfiddle 上添加此问题的工作示例

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

【问题讨论】：

也试过这个:(，没用。

你能发布更多代码吗？

还有什么，需要更多代码:)，实际上其他代码与jtable.org有关，上面的代码是完整的，正在第一次下拉绑定。

【参考方案1】：

你也可以这样做：

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

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

【参考方案2】：

不知怎的，我找到了答案及其工作here

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

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

【讨论】：

有没有办法强制 Selectize 从原始 重新填充，而不必破坏 selectize 并丢失现有设置？

您找到答案了吗？如何在不破坏的情况下刷新下拉菜单？

【参考方案3】：

看起来您还打开了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'
        ]);
);

【讨论】：

你错过了我的问题，实际上，当我想单击第一个按钮时，它将与该值绑定，当我单击第二个按钮时，它将绑定第二个选项，它将从第二个继续到第一个。我找到了解决方案并写下了答案。请投票 :) 因为我无法为自己的答案投票。

@ObaidAhmed 我仍然没有兴趣重新创建 Selectize 控件，而不是更新它，但如果这确实是您想要/需要做的，我很高兴您找到了您的解决方案.顺便说一句，不要忘记关闭您打开的问题...