从 slect2.js 标签中的选项获取 class
Get class from options in slect2.js tags
我正在使用带有以下代码的 select2.js 库,我想要从选项标签到 select2 列表的所有 类,例如 <li class="active select2-selection__choice" title="AA"><span ...
<select id="example" multiple="multiple" style="width:100%">
<option value="AA" class="active" selected>AA</option>
<option value="BB" class="stanby" selected>BB</option>
<option value="CC"class="active" selected>CC</option>
$("#example").select2();
Here 是要使用的 fiddle。
这可以通过提供自定义 selectionAdapter
选项来实现。我基于 MultipleSelection
.
的 Select2 实现创建了一个
// create our custom selection adapter by extending the select2 default one
$.fn.select2.amd.define('select2-ClassPreservingMultipleSelection',[
'jquery',
'select2/selection/multiple',
'select2/utils'
], function ($, MultipleSelection, Utils) {
function ClassPreservingMultipleSelection ($element, options) {
ClassPreservingMultipleSelection.__super__.constructor.apply(this, arguments);
}
Utils.Extend(ClassPreservingMultipleSelection, MultipleSelection);
// this function was changed to propagate the `selection` argument
ClassPreservingMultipleSelection.prototype.selectionContainer = function (selection) {
var $baseContainer = ClassPreservingMultipleSelection.__super__.selectionContainer.apply(this, arguments);
// this line is what actually adds your CSS-classes
return $baseContainer.addClass(selection.element.className);
};
// this is a copy-paste of the base method with only one line changed
ClassPreservingMultipleSelection.prototype.update = function (data) {
this.clear();
if (data.length === 0) {
return;
}
var $selections = [];
for (var d = 0; d < data.length; d++) {
var selection = data[d];
// This is the only changed line in this method - we added the 'selection' propagation
var $selection = this.selectionContainer(selection);
var formatted = this.display(selection, $selection);
$selection.append(formatted);
$selection.prop('title', selection.title || selection.text);
$selection.data('data', selection);
$selections.push($selection);
}
var $rendered = this.$selection.find('.select2-selection__rendered');
Utils.appendMany($rendered, $selections);
console.log($rendered.html());
};
return ClassPreservingMultipleSelection;
});
$("#example").select2({
selectionAdapter: $.fn.select2.amd.require('select2-ClassPreservingMultipleSelection')
});
这是给你的updated JsFiddle。
我正在使用带有以下代码的 select2.js 库,我想要从选项标签到 select2 列表的所有 类,例如 <li class="active select2-selection__choice" title="AA"><span ...
<select id="example" multiple="multiple" style="width:100%">
<option value="AA" class="active" selected>AA</option>
<option value="BB" class="stanby" selected>BB</option>
<option value="CC"class="active" selected>CC</option>
$("#example").select2();
Here 是要使用的 fiddle。
这可以通过提供自定义 selectionAdapter
选项来实现。我基于 MultipleSelection
.
// create our custom selection adapter by extending the select2 default one
$.fn.select2.amd.define('select2-ClassPreservingMultipleSelection',[
'jquery',
'select2/selection/multiple',
'select2/utils'
], function ($, MultipleSelection, Utils) {
function ClassPreservingMultipleSelection ($element, options) {
ClassPreservingMultipleSelection.__super__.constructor.apply(this, arguments);
}
Utils.Extend(ClassPreservingMultipleSelection, MultipleSelection);
// this function was changed to propagate the `selection` argument
ClassPreservingMultipleSelection.prototype.selectionContainer = function (selection) {
var $baseContainer = ClassPreservingMultipleSelection.__super__.selectionContainer.apply(this, arguments);
// this line is what actually adds your CSS-classes
return $baseContainer.addClass(selection.element.className);
};
// this is a copy-paste of the base method with only one line changed
ClassPreservingMultipleSelection.prototype.update = function (data) {
this.clear();
if (data.length === 0) {
return;
}
var $selections = [];
for (var d = 0; d < data.length; d++) {
var selection = data[d];
// This is the only changed line in this method - we added the 'selection' propagation
var $selection = this.selectionContainer(selection);
var formatted = this.display(selection, $selection);
$selection.append(formatted);
$selection.prop('title', selection.title || selection.text);
$selection.data('data', selection);
$selections.push($selection);
}
var $rendered = this.$selection.find('.select2-selection__rendered');
Utils.appendMany($rendered, $selections);
console.log($rendered.html());
};
return ClassPreservingMultipleSelection;
});
$("#example").select2({
selectionAdapter: $.fn.select2.amd.require('select2-ClassPreservingMultipleSelection')
});
这是给你的updated JsFiddle。