如何动态地将 class 添加到 Selectize 选项?
How do I add a class to a Selectize option, dynamically?
向 select
输入添加选项时,使用 jQuery:
有条件地添加 class 很简单
$("#mySelect").append(
$("<option></option>")
.text(myName)
.val(myValue)
.addClass(myBoolean ? "class1" : "class2")
);
我的问题是:如何使用selectize.js达到同样的效果?
我可以使用下面的代码来添加一个选项(变量mySelect
指的是类似$("#mySelect")[0].selectize
的东西)。
mySelect.addOption({
value: productGrouping.id,
text: productGrouping.name
});
在此处添加 class
选项不起作用,addOption()
也不会 return 任何东西,所以我不知道该怎么做。有可能吗?
这是 SelectizeJS Plugin 的绝佳案例。
我写了一个简单的例子来说明我认为你想要什么 -- 标有 "favorite: true" 属性 的选项有一个新的 class 和样式,添加到它们在 SelectizeJS 小部件中动态显示。
selectize.plugins.js
Selectize.define('favorite_options', function(options) {
options = $.extend({
className : 'favorited'
}, options);
var favoriteOptionsClass = function(thisRef, options) {
var self = thisRef;
console.log({'self':self})
var original = self.setup;
self.setup = (function() {
return function() {
var option_render = self.settings.render.option;
self.settings.render.option = function(option) {
// "render" the original option to get the current HTML
var html = option_render.apply(self, arguments);
// modify HTML to add class
var $html = $(html);
var classes = $html.attr("class");
if (option.favorite) {
$html.addClass("favorite")
}
// return NEW $html element as HTML string
return $('<div>').append($html.clone()).html();
}
original.apply(self, arguments);
};
})();
}
favoriteOptionsClass(this, options);
return;
});
app.js
$("#wiki-select-property").selectize({
maxItems: 1,
valueField: 'id',
labelField: 'title',
searchField: 'title',
plugins: [
'favorite_options'
],
options: [
{id: 1, title: 'Spectrometer', favorite: true, url: 'http://en.wikipedia.org/wiki/Spectrometers'},
{id: 2, title: 'Star Chart', favorite: false, url: 'http://en.wikipedia.org/wiki/Star_chart'},
{id: 3, title: 'Electrical Tape', favorite: false, url: 'http://en.wikipedia.org/wiki/Electrical_tape'}
]
})
向 select
输入添加选项时,使用 jQuery:
$("#mySelect").append(
$("<option></option>")
.text(myName)
.val(myValue)
.addClass(myBoolean ? "class1" : "class2")
);
我的问题是:如何使用selectize.js达到同样的效果?
我可以使用下面的代码来添加一个选项(变量mySelect
指的是类似$("#mySelect")[0].selectize
的东西)。
mySelect.addOption({
value: productGrouping.id,
text: productGrouping.name
});
在此处添加 class
选项不起作用,addOption()
也不会 return 任何东西,所以我不知道该怎么做。有可能吗?
这是 SelectizeJS Plugin 的绝佳案例。
我写了一个简单的例子来说明我认为你想要什么 -- 标有 "favorite: true" 属性 的选项有一个新的 class 和样式,添加到它们在 SelectizeJS 小部件中动态显示。
selectize.plugins.js
Selectize.define('favorite_options', function(options) {
options = $.extend({
className : 'favorited'
}, options);
var favoriteOptionsClass = function(thisRef, options) {
var self = thisRef;
console.log({'self':self})
var original = self.setup;
self.setup = (function() {
return function() {
var option_render = self.settings.render.option;
self.settings.render.option = function(option) {
// "render" the original option to get the current HTML
var html = option_render.apply(self, arguments);
// modify HTML to add class
var $html = $(html);
var classes = $html.attr("class");
if (option.favorite) {
$html.addClass("favorite")
}
// return NEW $html element as HTML string
return $('<div>').append($html.clone()).html();
}
original.apply(self, arguments);
};
})();
}
favoriteOptionsClass(this, options);
return;
});
app.js
$("#wiki-select-property").selectize({
maxItems: 1,
valueField: 'id',
labelField: 'title',
searchField: 'title',
plugins: [
'favorite_options'
],
options: [
{id: 1, title: 'Spectrometer', favorite: true, url: 'http://en.wikipedia.org/wiki/Spectrometers'},
{id: 2, title: 'Star Chart', favorite: false, url: 'http://en.wikipedia.org/wiki/Star_chart'},
{id: 3, title: 'Electrical Tape', favorite: false, url: 'http://en.wikipedia.org/wiki/Electrical_tape'}
]
})