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

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 に含まれるテキストのみを返します...ただし、そのテキストをスパンでラップしたい (そして、オブジェクトを返すことによって HTML を取り除かないように S2 に指示する) には、型のカスタム 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 にアクセスする必要があるため、これでは十分ではありません。また、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 に答える
1

および オプションを使用してコードでクラスを指定しformatResultCssClass、containerCssClassおよびオプションを使用してマークアップでクラスを指定します。また、およびオプションを使用してコードでインライン スタイルを指定することもできます。dropdownCssClassadaptContainerCssClassadaptDropdownCssClasscontainerCssdropdownCss

なぜそれらを使用しなかったのか疑問に思っているなら、それらは少し前に適切に文書化されていませんでした.

参照: < http://ivaynberg.github.io/select2/ >

于 2014-01-23T11:13:49.737 に答える
1

一部の select2 ボックスの色のみを変更したい場合:

select2-choice の Select2 CSS プロパティを直接変更する代わりに、select2 div 用に select2 によって生成された ID (これは #s2id_yourelementid になります) を使用して、select2-choice クラスを持つその子を選択します。

たとえば、Select2 を適用する要素 #myelement を変更したい場合、色を変更するには、css に次を追加します。

#s2id_myelement > .select2-choice{
     background-color:blue;
}
于 2014-10-29T14:03:38.917 に答える
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 に答える