Selectize：使用 setValue 在 onInitialize 中设置默认值

Question

我有一个 Web 应用程序，在页面上初始化了多个 Selectize 对象。我试图让每个实例在页面加载时根据查询字符串加载默认值，其中 ?<obj.name>=<KeywordID>。所有 URL 参数都已序列化，是一个字典调用 that.urlParams。

我知道还有其他方法 initializing Selectize with a default value 我可以试试；但是，我很好奇为什么在 onInitialize 中调用 setValue 对我不起作用，因为我在运行这段代码时收到任何错误消息。

我将所有这些 JavaScript 与 Browserify 捆绑在一起，但我认为这不会导致此问题。

在调试方面，我尝试将 this 记录到 onInititalize 内的控制台，发现 setValue 在 Function.prototype 属性，options 属性中充满了来自 load 的数据，options 中那些对象的键对应于 KeywordID。但是当我将 getValue(val) 登录到控制台时，我得到一个空字符串。有没有办法让这个工作，或者我忽略了一些关于 Selectize 或 JavaScript?

module.exports = function() {    
    var that = this;

    ...

    this.selectize = $(this).container.selectize({
        valueField: 'KeywordID',  // an integer value
        create: false,
        labelField: 'Name',
        searchField: 'Name',
        preload: true,
        allowEmptyOptions: true,
        closeAfterSelect: true,
        maxItems: 1,
        render: {
           option: function(item) {
                return that.template(item);
            },
        },
        onInitialize: function() {
            var val = parseInt(that.urlParams[that.name], 10);  // e.g. 5
            this.setValue(val);
        },
        load: function(query, callback) {
            $.ajax({
                url: that.url,
                type: 'GET',
                error: callback,
                success: callback
            })
        }
    });

};

...

Answer 1

往Selectize.js里撒了一些console.logs之后，发现ajax的数据还没有导入，触发initialize事件的时候。我最终找到了一个解决方案，使用 jQuery.when() 使 setValue 在加载数据后触发，但我仍然希望我能找到一个功能单一的解决方案。

module.exports = function() {    
    var that = this;

    ...

    this.selectize = $(this).container.selectize({
        valueField: 'KeywordID',  // an integer value
        create: false,
        labelField: 'Name',
        searchField: 'Name',
        preload: true,
        allowEmptyOptions: true,
        closeAfterSelect: true,
        maxItems: 1,
        render: {
           option: function(item) {
                return that.template(item);
            },
        },
        load: function(query, callback) {
            var self = this;
            $.when( $.ajax({
                url: that.url,
                type: 'GET',
                error: callback,
                success: callback
            }) ).then(function() {
                var val = parseInt(that.urlParams[that.name], 10);  // e.g. 5
                self.setValue(val);
            });
        }
    });

};

...

Answer 2

您只需在将其设置为值之前添加该选项，因为 addItem 中的这一行将检查它： if (!self.options.hasOwnProperty(value)) return;

在 onInitialize 中你会做：

var val = that.urlParams[that.name]; //It might work with parseInt, I haven't used integers in selectize options though, only strings.
var opt = {id:val, text:val};
self.addOption(opt);
self.setValue(opt.id);

Answer 3

您可以将 load 触发器添加到 selectize，而不是使用 onInitialize。这将在加载完成后触发，并将按预期执行 setValue()。

var $select = $(this).container.selectize({
    // ...
    load: function(query, callback) {
        // ...
    }
});
var selectize = $select[0].selectize;
selectize.on('load', function(options) {
    // ...
    selectize.setValue(val);
});

请注意，为此您首先必须获得选择实例 ($select[0].selectize)。

Answer 4

在我的情况下它需要刷新我只是在它旁边添加了另一个命令

                $select[0].selectize.setValue(opt);

我添加了这个 $select[0].selectize.options[选择].selected = true;

并应用更改

但我不知道为什么？

Selectize：使用 setValue 在 onInitialize 中设置默认值

Selectize: Setting Default Value in onInitialize with setValue

javascript

selectize.js