18

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

したがって、代わりに：

標準的な選択肢

むしろ持っています：

ここに画像の説明を入力

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

編集: コードは:

<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
})
4

4 に答える 4

18

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

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

$(".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イベントをリッスンし、各リスト項目を対応するものとペアにしてoption、<select>選択状態を切り替えて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/で確認できます。これが誰かの役に立てば幸いです。

于 2015-12-07T17:52:11.930 に答える
4

要素がレンダリングされると、クラスを持つ ul が要素に追加されます。このクラス名は次のとおりです。select2-selection__rendered したがって、レンダリング後に、このクラスを取得して底を追加できるというのが私の考えでした。このために、私はJQueryを使用$(function()して、これが行うことはすべてがロードされた後にロードすることであるため、必要な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>
于 2015-05-22T22:06:40.623 に答える