Question

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

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

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

在调试方面，我尝试将this记录到onInititalize内的控制台，发现setValue在Function.prototype属性中上升了一级，{{1 } {property}来自options的数据，load中的对象的键对应于KeywordID。但是当我将options记录到控制台时，我得到一个空字符串。有没有办法让这项工作或我无视Selectize或JavaScript？

getValue(val)

Answer 1

在将一些console.logs洒入Selectize.js之后，我发现当触发initialize事件时，没有导入ajax数据。在加载数据后，我最终找到了使用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

除了使用onInitialize之外，您还可以向选择对象添加load触发器。该操作将在加载完成后触发，并按预期执行setValue()。

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

请注意，为此，您首先必须获得selectize实例（$select[0].selectize）。

Answer 3

您只需在将其设置为值之前添加该选项，因为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 4

就我而言，它需要刷新，我只是在它旁边添加了另一个命令

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

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

和已应用的更改

但是我不知道为什么吗？

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

4 个答案: