2015-04-30 51 views
1

如果您在选择性下拉列表中创建了自定义渲染功能,是否可以使用ajax动态刷新下拉项目?我可以做一个或另一个,但是当我将这两个功能组合在一起时,选择性下拉菜单项不会重新渲染。选择性使用自定义渲染动态刷新项目

我已经使用回调函数来设置新的选项列表。

当页面加载时,使用以下javascript代码初始化selectize控件。

var $select = $(item).selectize({ 
    create: false, 
    sortField: 'text', 
    selectOnTab: true, 
    valueField: 'id', 
    labelField: 'text', 
    searchFields: ['text'], 
    render: { 
    item: function(selectItem, escape) { 
     var splitAt = selectItem.text.indexOf(';'); 
     var label; 
     var caption = ''; 
     if (splitAt > 0) { 
     label = selectItem.text.substring(0, splitAt); 
     caption = selectItem.text.substring(splitAt + 1); 
     } else { 
     label = selectItem.text; 
     } 

     return '<div>' + 
     (label ? '<span class="text">' + escape(label) + '</span>' : '') + 
     (caption ? '<span class="description">' + escape(caption) + '</span>' : '') + 
     '</div>'; 
    }, 
    option: function(selectItem, escape) { 
     var splitAt = selectItem.text.indexOf(';'); 
     var label; 
     var caption = ''; 
     if (splitAt > 0) { 
     label = selectItem.text.substring(0, splitAt); 
     caption = selectItem.text.substring(splitAt + 1); 
     } else { 
     label = selectItem.text; 
     } 

     return '<div>' + 
     '<span class="label">' + escape(label) + '</span>' + 
     (caption ? '<span class="caption">' + escape(caption) + '</span>' : '') + 
     '</div>'; 
    } 
    } 
}); 

然后我有一个请求最新的下拉选项,并尝试更新selectize控制的AJAX方法:一旦方法运行

var refreshSuppliers = function() { 
    $.getJSON('url/suppliers', function(results) { 
     if (results) { 
     var selectOptions = []; 
     for (var index = 0, length = results.length; index < length; index++) { 
      var item = results[index]; 
      selectOptions.push({ 
      text: item.Option, 
      value: item.Id.toString() 
      }); 
     } 

     var selectize = $("#Supplier")[0].selectize; 
     selectize.clear(); 
     selectize.clearOptions(); 
     selectize.load(function(callback) { 
      callback(selectOptions); 
     }); 
     } 
    }) 

,下拉网页上是空的。如果我删除所有自定义渲染并将其视为简单选择下拉菜单,则可以使用ajax来更新下拉菜单。

有没有办法让这两个功能一起工作?

回答

5

selectize.js库中似乎存在一个错误,当您调用clearOptions()时,呈现的输出不会从renderCache中清除。我可以通过手动清除缓存得到这个工作:

selectize.clearOptions(); 
selectize.renderCache = {}; 
selectize.load(function(callback) { 
    callback(selectOptions); 
}); 

有GitHub上一个悬而未决的问题本: https://github.com/brianreavis/selectize.js/issues/260

相关问题