14

我刚开始使用项目从选择框中显示多个标签，效果很好，感谢图书馆。

我只需要修改多值选择框中显示的标签的颜色或 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"; }
                });
4

8 回答 8

18

要格式化标签，您可以使用函数 formatSelectionCssClass。

$("#mySelect").select2({
    formatSelectionCssClass: function (data, container) { return "myCssClass"; },
});

或者您可以根据选项 id 添加一个 css 类：

$("#mySelect").select2({
    formatSelectionCssClass: function (data, container) { return data.id; },
});

请记住，您需要在 CSS 类中同时覆盖 filter 和 background_color

于 2014-02-20T09:26:59.580 回答
7

首先 - 一个警告，这意味着您正在覆盖 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, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
    background-image: -o-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
    background-image: -ms-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
    background-image: linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
    -webkit-box-shadow: 0 0 2px #ffffff inset, 0 1px 0 rgba(0,0,0,0.05);
    -moz-box-shadow: 0 0 2px #ffffff inset, 0 1px 0 rgba(0,0,0,0.05);
    box-shadow: 0 0 2px #ffffff inset, 0 1px 0 rgba(0,0,0,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
}
于 2013-01-16T13:19:51.407 回答
4

在我的情况下，我需要显示“选择”的标签和正在添加的标签之间的区别。

这里的帮助是针对以前版本的 select2 的，并没有多大用处。使用当前的 4.0 版本（带有非常稀疏的文档），我能够使用模板函数和一点“聪明”来实现这一点。

第一步是对结果进行模板化（应该注意，在每次选择或删除操作时，都会为框中的每个选择触发）。这通常只返回将在生成的 LI 中出现的文本......但是我们希望将该文本包装在一个跨度中（并告诉 S2 不要通过返回一个对象来剥离 HTML），并为我们的类型使用自定义 CSS 类。在我的示例中，我使用该selected属性来确定这一点：

$('.select2_sortable').select2({
    tags: true,
    templateSelection: function(selection) {
        if(selection.selected) {
            return $.parseHTML('<span class="im_selected">' + selection.text + '</span>');
        }
        else {
            return $.parseHTML('<span class="im_writein">' + selection.text + '</span>');
        }
    }
});

选择项目后生成的 HTML 应该是这样的：

<ul class="select2-selection__rendered ui-sortable" id="select2_rendered_smartselectbox_4">
    <li class="select2-selection__choice" title="John Doe">
        <span class="select2-selection__choice__remove" role="presentation">×</span>
        <span class="im_selected">John Doe</span>
    </li>
    <li class="select2-selection__choice" title="fdfsdfds">
        <span class="select2-selection__choice__remove" role="presentation">×</span>
    <span class="im_writein">fdfsdfds</span>
    </li>
    <li class="select2-search select2-search--inline ui-sortable-handle">
        <input class="select2-search__field" type="search" tabindex="-1" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" role="textbox" placeholder="" style="width: 0.75em;">
    </li>
</ul>

但这还不够，因为我们需要访问父 LI，而不是 span 子。由于 CSS 不允许父选择器，我们必须运行一些 jQuery 来实现它。因为这些是重绘的，所以我们希望在 Select2 项的select和事件上运行此函数：remove

$('.select2_sortable').on("select2:select", function (ev) {
    updateSelectedParents();
});
$('.select2_sortable').on("select2:removed", function (ev) {
    updateSelectedParents();
});

function updateSelectedParents() {
    $('.im_selected').closest('li').addClass('im_connected_item');
    $('.im_writein').closest('li').addClass('im_writein_item');
}

最终导致：

<ul class="select2-selection__rendered ui-sortable" id="select2_rendered_smartselectbox_4">
    <li class="select2-selection__choice im_connected_item" title="John Doe">
        <span class="select2-selection__choice__remove" role="presentation">×</span>
        <span class="im_selected">John Doe</span>
    </li>
    <li class="select2-selection__choice im_writein_item" title="fdfsdfds">
        <span class="select2-selection__choice__remove" role="presentation">×</span>
    <span class="im_writein">fdfsdfds</span>
    </li>
    <li class="select2-search select2-search--inline ui-sortable-handle">
        <input class="select2-search__field" type="search" tabindex="-1" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" role="textbox" placeholder="" style="width: 0.75em;">
    </li>
</ul>

并允许您根据im_writein_item和im_connected_itemCSS 类对元素进行样式设置。

于 2015-06-16T21:28:17.480 回答
2

您可以像这样访问标签容器：

formatSelectionCssClass = function(tag, container) {
    $(container).parent().addClass("my-css-class");
};
于 2014-07-31T22:06:07.773 回答
1

使用formatResultCssClass,containerCssClass和dropdownCssClass选项指定代码中的类，使用adaptContainerCssClassandadaptDropdownCssClass选项指定标记中的类，甚至使用containerCssanddropdownCss选项指定代码中的内联样式。

如果你想知道为什么你从来没有使用过这些，那么它们不久前没有被正确记录。

参考：< http://ivaynberg.github.io/select2/ >

于 2014-01-23T11:13:49.737 回答
1

对于那些只想更改某些 select2 框颜色的人：

与其直接修改 select2-choice 的 Select2 CSS 属性，不如使用 select2 为 select2 div 生成的 ID（这将是#s2id_yourelementid）来选择其携带 select2-choice 类的子项。

例如，如果我想修改应用 Select2 的元素#myelement，然后要更改颜色，我会在我的 css 中添加以下内容：

#s2id_myelement > .select2-choice{
     background-color:blue;
}
于 2014-10-29T14:03:38.917 回答
0

添加这个 CSS 对我有用：

.select2-selection__choice {
  background-color: red !important;
  filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#f4f4f4', endColorstr='#eeeeee', GradientType=0);
  background-image: -webkit-linear-gradient(top, red 25%, yellow 52%, green 25%, purple 100%) !important;
  background-image: -moz-linear-gradient(top, red 25%, yellow 52%, green 25%, purple 100%) !important;
  background-image: -o-linear-gradient(top, red 25%, yellow 52%, green 25%, purple 100%) !important;
  background-image: -ms-linear-gradient(top, red 25%, yellow 52%, green 25%, purple 100%) !important;
  background-image: linear-gradient(top, red 25%, yellow 52%, green 25%, purple 100%) !important;
  -webkit-box-shadow: 0 0 2px #ffffff inset, 0 1px 0 rgba(0, 0, 0, 0.05) !important;
  -moz-box-shadow: 0 0 2px #ffffff inset, 0 1px 0 rgba(0, 0, 0, 0.05) !important;
  box-shadow: 0 0 2px #ffffff inset, 0 1px 0 rgba(0, 0, 0, 0.05) !important;
  color: white !important;
  border: 1px solid #aaaaaa !important;
}

小提琴示例：

http://jsfiddle.net/sajjansarkar/hvsvcc5r/

（是的，我疯狂地用颜色来证明我的观点；-)）

于 2017-07-25T14:47:12.730 回答
0

我在下面使用

    .form-control{
        border: 1px solid #cccccc!important;
    }
    .select2-container .select2-selection--single {
        height: 48px !important;
        padding: 10px;
        border-radius: 0px;
        border: 1px solid #cccccc;
    }
    .select2-container .select2-selection--multiple {
        height: 48px !important;
        padding: 5px;
        border-radius: 0px;
        border: 1px solid #cccccc;
    }
于 2019-11-27T08:21:12.473 回答