Selectize.js 上的条件选项

Question

我有一个 select 有两种类型的选项：用户和组。当用户被 selected 时没问题，但是当 selected 是一个组时，我需要用组中的用户列表替换 selected 项目，使用像这样的组其中一组的别名。

示例：我有这个选项列表：

var options: [
            {text: 'Ironman', value: '1', type: 'user' },
            {text: 'Spiderman', value: '2', type: 'user' },
            {text: 'Black Widow', value: '3', type: 'user' },
            {text: 'Superhero', value: '4', type: 'group' }
        ]

当select编辑'Superhero'时，我需要'Ironman'、'Spiderman'和'Black Widow'的列表替换选择。我找不到正确的事件来阻止 selection 并将其替换为用 AJAX.

检索的用户列表

Answer 1

您可以使用 .on('change', handler) event :

// When you create your selectize
var $select = $("#select_id").selectize({
    // Options here
});
var selectizeControl = $select[0].selectize;

然后就可以访问了

selectizeControl.on('change', function() {
    var value = selectize.getValue();
    // From here you get the value, and do whatever you need with it
    console.log(value);

    if (options[value]["type"] == 'group')
    {
        var tmp = 0;
        var users = "";
        // Here, do your ajax call to get your list from the value
        ajaxCall(value, function(list) {
            // I guess you'd have an array from your server
            for (var user in list)
            {
                if (tmp > 0)
                    users += ",";
                users += user;
                tmp++;
            }
            $('#select_id').val(users);
        });
    }
});

Selectize.js 上的条件选项

Conditional options on Selectize.js

jquery

selectize.js