如何以编程方式设置 selectize.js 选项列表？答案

【问题标题】：How do I set the selectize.js options list programmatically?如何以编程方式设置 selectize.js 选项列表？
【发布时间】：2013-12-28 04:02:36
【问题描述】：

我知道如何在 Initiliaztion 上设置optionList，但如何以编程方式设置它？

我有一个 inviteList 数组：

$("#select-invite").options(inviteList);

【问题讨论】：

标签： selectize.js

【解决方案1】：

您可以使用加载方法通过programmatic API 设置选项。您可能还想调用 clear 和 clearOptions 方法来重置选定的值和旧选项。

以下是如何将它们组合在一起：

var selectize = $("#select-invite")[0].selectize;
selectize.clear();
selectize.clearOptions();
selectize.load(function(callback) {
    callback(inviteList);
});

请注意，inviteList 应该是一个对象数组，这些对象在 select 初始化时在 valueField 和 labelField 选项中配置了属性。例如，使用默认 valueField 和 labelField 选项时，inviteList 应该是这样的：

var inviteList = [
    {
        text: 'Option One',
        value: 1
    },
    {
        text: 'Option Two',
        value: 2
    }
];

【讨论】：

clearOptions() 调用 clear()，所以不需要手动调用 clear()？
"text" 和 "value" 都是关于在配置中设置为 "labelField" 和 "valueField" 的内容。
var selectize = $("#select-invite")[0].selectize;返回未定义？
@SohamBhaumik check stackoverflow.com/a/26923799/704008 如果您尚未在元素上应用selectize，则上述答案部分正确
谢谢！这是我能找到的唯一解决方案。这些方法不在此插件的任何文档中（我可以找到）。有点遗憾，考虑到这是一个不错的插件。

【解决方案2】：

据我所知，没有通过 API 添加多个选项的方法。您需要编写一个使用addOption() 方法的循环。在尝试使用 API 之前，您需要获取 selectize 的控件实例。请看下面的示例，来自 Github 示例：

// Create the selectize instance as usual 
var $select = $('#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'},
        {id: 3, title: 'Electrical Tape', url: 'http://en.wikipedia.org/wiki/Electrical_tape'}
    ],
    create: false
});

// Get the selectize control instance
var control = $select[0].selectize;

// Add the new option when a button is clicked
// Remove the click event and put the addOption call in a loop
$('#button-addoption').on('click', function() {
        control.addOption({
        id: 4,
        title: 'Something New',
        url: 'http://google.com'
    });
});

来自Github examples。

【讨论】：

仅供参考，今天，addOption() 保留了单数名称，但现在接受一组选项。
投反对票的人，请解释投反对票。带有解释的反对票对任何人都没有价值。
我猜是因为这样做的方法是通过 load 设置，由 byte255 编写；这允许不了解 Selectize 内部结构。其实你的方法也不错，但是（我认为）添加选项后调用refreshOptions 是错过了。

【解决方案3】：

我知道这是一个老问题，但截至 2021 我发现这是实现这一目标的最简单方法：

基于上面@byte255 的回答，您只需要使用clearOptions 方法和addOption 方法。

let selectize = $("#select-invite")[0].selectize;

selectize.clearOptions();

let newOptions = [
    {
        text: 'Option One',
        value: 1
    },
    {
        text: 'Option Two',
        value: 2
    }
]

selectize.addOption(newOptions);

【讨论】：