我刚开始使用项目从一个选择框显示多个标签,它的工作非常好,谢谢图书馆.
我只需要修改多值选择框中显示的标签的颜色或CSS.现在,标签的颜色显示为灰色,我想根据标签的类型将其更改为其他颜色.还是至少有办法改变默认颜色？
还有可能改变标签的css类？有一个选项,如formatResultCssClass,但是当我尝试添加css类通过该属性没有改变,我会感激,如果有人可以显示一个例子如何做到这一点？
编辑：解决问题的解决方法：
向select2.defaults添加一个新属性,用于表示所选对象的类.
$.fn.select2.defaults = {
...
selectedTagClass: "",...
}
addSelectedChoice: function (data) {
var choice=$(
"<li class='select2-search-choice " + this.opts.selectedTagClass + "'>" +
" <div><a href='#' onclick='return false;' class='select2-search-choice-close' tabindex='-1'><i class='icon-remove icon-white'/></a></div>" +
"</li>"),id = this.id(data),val = this.getVal(),formatted;
...
并使用此新属性初始化select2：
$(".#select2Input").select2({placeholder: "Please Select Country",selectedTagClass: 'label label-info',// label label-info are css classes that will be used for selected elements
formatNoMatches: function () { return "There isn't any country similar to entered query"; }
});
解决方法
首先 – 一个警告,这意味着您覆盖了select2内部的CSS,所以如果select2代码在以后更改,您还必须更改代码.目前没有formatChoiceCSS方法(尽管这将是有用的).
要更改默认颜色,您必须覆盖具有此CSS类的标签的各种CSS属性：
.select2-search-choice {
background-color: #56a600;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4f4f4',endColorstr='#eeeeee',GradientType=0 );
background-image: -webkit-gradient(linear,0% 0%,0% 100%,color-stop(20%,#f4f4f4),color-stop(50%,#f0f0f0),color-stop(52%,#e8e8e8),color-stop(100%,#eeeeee));
background-image: -webkit-linear-gradient(top,#f4f4f4 20%,#f0f0f0 50%,#e8e8e8 52%,#eeeeee 100%);
background-image: -moz-linear-gradient(top,#eeeeee 100%);
background-image: -o-linear-gradient(top,#eeeeee 100%);
background-image: -ms-linear-gradient(top,#eeeeee 100%);
background-image: linear-gradient(top,#eeeeee 100%);
-webkit-Box-shadow: 0 0 2px #ffffff inset,0 1px 0 rgba(0,0.05);
-moz-Box-shadow: 0 0 2px #ffffff inset,0.05);
Box-shadow: 0 0 2px #ffffff inset,0.05);
color: #333;
border: 1px solid #aaaaaa;
}
要根据该标签的文本或选项#更改每个标签的类别,您必须添加更改事件：
$("#select2_element").on("change",function(e) {
if (e.added) {
// You can add other filters here like
// if e.val == option_x_of_interest or
// if e.added.text == some_text_of_interest
// Then add a custom CSS class my-custom-css to the <li> added
$('.select2-search-choice:not(.my-custom-css)',this).addClass('my-custom-css');
}
});
您可以在此类中定义自定义背景颜色等：
li.my-custom-css {
background-color: // etc etc
}
