2015-04-30 48 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

相關問題