Question

我知道如何在Initiliaztion上设置optionList但是如何以编程方式设置它？我有一个inviteList数组。

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

Answer 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
    }
];

Answer 2

据我所知，没有办法通过API添加多个选项。您需要编写一个使用addOption()方法的循环。在尝试使用API之前，您需要获取选择控件的实例。从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。

Answer 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);

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

3 个答案: