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

Question

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

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

Answer 1

您可以使用load方法通过编程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的例子.