Question

如果您在选择下拉列表中创建了自定义渲染功能，是否可以使用ajax动态刷新下拉列表项？我可以做其中一个，但是当我合并功能的两个部分时，选择性下拉项目不会重新渲染。

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

当页面加载时，使用以下javascript代码初始化选择控件。

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>';
    }
  }
});

然后我有一个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调用将起作用。

这两种功能是否有办法协同工作？

Answer 1

selectize.js库中似乎存在一个错误，当您调用clearOptions（）时，渲染的输出不会从renderCache中清除。我可以通过手动清除缓存来实现这一点：

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

github上有一个未解决的问题： https://github.com/brianreavis/selectize.js/issues/260

使用自定义呈现动态选择刷新项目

1 个答案: