使用自定义呈现动态选择刷新项目
Selectize Refresh items dynamically with custom rendering
如果您在选择下拉菜单上创建了自定义呈现功能,是否可以使用 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 更新下拉菜单的调用有效。
有没有办法让这两个功能协同工作?
selectize.js 库中似乎存在一个错误,当您调用 clearOptions() 时,渲染输出未从 renderCache 中清除。我能够通过手动清除缓存来让它工作:
selectize.clearOptions();
selectize.renderCache = {};
selectize.load(function(callback) {
callback(selectOptions);
});
github 上有一个未解决的问题:
https://github.com/brianreavis/selectize.js/issues/260
如果您在选择下拉菜单上创建了自定义呈现功能,是否可以使用 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 更新下拉菜单的调用有效。
有没有办法让这两个功能协同工作?
selectize.js 库中似乎存在一个错误,当您调用 clearOptions() 时,渲染输出未从 renderCache 中清除。我能够通过手动清除缓存来让它工作:
selectize.clearOptions();
selectize.renderCache = {};
selectize.load(function(callback) {
callback(selectOptions);
});
github 上有一个未解决的问题: https://github.com/brianreavis/selectize.js/issues/260