javascript - 如何以编程方式将选项添加到 selectize.js 中的选项组

Question

我想在 Selectize.js 中向选项组动态添加一个选项。 API只有

addOption(data)
updateOption(value, data)
addOptionGroup(id, data)

对“数据”是什么没有太多帮助。我看过添加选项的示例，但没有提到使用 optionGroups

$('#button-addoption').on('click', function() {
    control.addOption({
    id: 4,
    title: 'Something New',
    url: 'http://google.com'
});

谢谢

Answer 1

Data是传递给optgroup渲染方法的对象。因此，您可以在其中放入任何东西。

$('#selectize').selectize({
    ...
    optgroupField: 'mygroup',
    render: {
        optgroup_header: function(data, escape) {
            return '<div class="optgroup-header">' + escape(data.a) + escape(data.b) '</div>';
        }
    },
    ...
});

然后，您可以随时在选择中添加组和选项:

//add group
var optGroup = { a: 'fruit', b: ... };
$('#selectize')[0].selectize.addOptionGroup('0', optGroup);

//add option
var option = { value: 'abc', text: 'banana', mygroup: '1'};            
$('#selectize')[0].selectize.addOption(option);

当然，如果你只想要组的标签，你可以这样做:

//code
...
render: {
    optgroup_header: function(data, escape) {
    return '<div class="optgroup-header">' + escape(data) + '</div>';
}
...
//code

$('#selectize')[0].selectize.addOptionGroup('1', 'meat');

你可以看到 API demo (在页面中搜索“Optgroups(程序化)”)。