web-dev-qa-db-ja.com

ドロップダウンボックスの下のSelect2で選択したタグを表示するにはどうすればよいですか？

Select2（バージョン4）をタグ付きで使用しており、選択した選択肢を入力フィールドの下に表示したいと思います。

したがって、代わりに：

Standard choices

むしろ持っている：

enter image description here

これは可能ですか？もしそうなら、どうすればそれを達成できますか？

編集：コードは：

<select class="js-example-tags form-control" multiple="multiple">
    <option selected="selected">orange</option>
    <option selected="selected">white</option>
    <option selected="selected">purple</option>
    <option selected="selected">red</option>
    <option selected="selected">blue</option>
    <option selected="selected">green</option>
</select>

そして

$(".js-example-tags").select2({
tags: true
})
jqueryhtmlcssjquery-select2-4
15
Mhluzi Bhaka

要素がレンダリングされると、クラスを持つulが要素に追加されます。このクラス名は次のとおりです。_select2-selection__rendered_つまり、レンダリングされた後、このクラスを取得してボトムを追加できるというのが私の考えでした。このために私は$(function()を使用してJQueryを使用しました。これはすべてがロードされた後にロードするため、必要なjavascriptコードは次のようになります（テスト済み）。

Javascriptコード：

_  <script>
  $(".js-example-tags").select2({
   tags: true
  });

   $(function() {
      //Here you add the bottom pixels you need. I added 200px.
      $('.select2-selection__rendered').css({top:'200px',position:'relative'});
   });
  </script>
_
2
Herland Cid

私は数週間前にこの質問に出くわし、他の回答が必要とするSelect2のスタイル変更のいくつかよりもリスクが少ないと感じた代替ソリューションを共有したいと思いました。

私たちのチームが最終的に使用したのは、基になる<select>要素のchangeイベントをリッスンして、兄弟要素内のスタイル付きの順序付けされていないリストを構築/再構築するスクリプトでした。

$(".js-example-tags").select2({
    tags: true
}).on('change', function() {
    var $selected = $(this).find('option:selected');
    var $container = $(this).siblings('.js-example-tags-container');

    var $list = $('<ul>');
    $selected.each(function(k, v) {
       var $li = $('<li class="tag-selected"><a class="destroy-tag-selected">×</a>' + $(v).text() + '</li>');
       $list.append($li);
    });
    $container.html('').append($list);
}).trigger('change');

また、select2タグの外観に加えて新しいリストに機能を与えるために、clickイベントをリッスンし、各リストアイテムを<select>内の対応するoptionとペアにして選択した状態を切り替えて、changeイベントを再度トリガーします。

$selected.each(function(k, v) {
    var $li = $('<li class="tag-selected"><a class="destroy-tag-selected">×</a>' + $(v).text() + '</li>');
    $li.children('a.destroy-tag-selected')
        .off('click.select2-copy')
        .on('click.select2-copy', function(e) {
              var $opt = $(this).data('select2-opt');
              $opt.attr('selected', false);
              $opt.parents('select').trigger('change');
        }).data('select2-opt', $(v));
    $list.append($li);
});

この後、display: noneを使用して.select2-selection__choice要素を非表示にすることが問題になりました。

JQueryバージョン> 3では、属性$opt.prop('selected', false)の代わりにプロパティを設定します。それ以外の場合は作成されたタグを削除しません。

完全な例はここでレビューできます： http://jsfiddle.net/tjnicolaides/ybneqdqa/ -これが他の誰かに役立つことを願っています。

16
TJ Nicolaides

同じニーズがあったので、Select2 v4で動作する カスタム選択アダプター を作成しました。

Select2アダプターとは何ですか？

docs によると、Select2はアダプタパターンを使用するため、その機能を拡張するための推奨される方法は、独自のアダプタを実装することです。

SelectionAdapterは、選択オプションの表示だけでなく、検索ボックスなど、コンテナ内に埋め込む必要のあるその他すべてのものを制御します。

Select2は、単一選択コントロールと複数選択コントロールのSelectionAdapterのデフォルトの実装として、それぞれSingleSelectionアダプターとMultipleSelectionアダプターを提供します。

選択アダプターは、カスタムアダプターをselectionAdapter構成オプションに割り当てることでオーバーライドできます。

カスタム選択アダプターを備えたSelect2

plugin の完全なコードは大きすぎて、ここに投稿できません。縮小されたのはわずか3kbです。 Select2メインjavascriptファイルの後に含める必要があります。

<script src="select2.js"></script>
<script src="select2.customSelectionAdapter.min.js"></script>

そしてcss：

<link rel="stylesheet" href="select2.customSelectionAdapter.css" />

次に、プラグインを次のように初期化します。

var CustomSelectionAdapter = $.fn.select2.AMD.require("select2/selection/customSelectionAdapter");

$("select").select2({
    // other options 
    selectionAdapter: CustomSelectionAdapter
});

デフォルトでは、タグはselect2コンテナの直後に追加されます。 selectionContainerオプションを使用して、ページ内の別の場所に追加できます。

$("select").select2({
    // other options 
    selectionAdapter: CustomSelectionAdapter,
    selectionContainer: $('.foo')
});

デモ

https://andreivictor.github.io/select2-customSelectionAdapter/

2
andreivictor

選択した回答についてコメントできないようです...しかし、ページに複数のselect2があり、これを1つだけにしたい場合はどうでしょうか。その1つとすべてを識別する信頼できる方法はありますか？

0
Denny