web-dev-qa-db-ja.com

select2 multiselectのオプションリストから選択したオプションを削除し、選択したオプションを選択順に表示する方法

フォームにselect2複数選択フィールドがあり、選択後にドロップダウンリストから選択したオプションを削除し、リストから削除された場合はリストに再度追加します。また、追加されたアイテムは、選択した順序と同じ順序である必要があります。現在のselect2（4.0）は、選択されたアイテムを削除せず、選択されたアイテムを、選択された順序ではなく、ドロップダウンリストに表示される順序で表示しています。

$(document).ready(function(){
    $('#dynamicAttributes').select2({
            allowClear: true,
            minimumResultsForSearch: -1,
            width: 600
     });
 });

JSFiddle： https://jsfiddle.net/rd62bhbm/

jqueryjquery-select2select2
21
user1614862

Qのパート1：

CSSトリックを実行して、selected item このような：

.select2-results__option[aria-selected=true] {
    display: none;
}

Qのパート2：

また、JQueryトリックを実行してselected itemsタグボックスの最後に、（選択時に選択したアイテムを取得し、それをデタッチ（削除）し、タグボックスに再追加し、「変更関数」を呼び出して変更を適用します）：

$("select").on("select2:select", function (evt) {
    var element = evt.params.data.element;
    var $element = $(element);
    $element.detach();
    $(this).append($element);
    $(this).trigger("change");
});

最終更新 JsFiddle 、お役に立てば幸いです、ありがとう！

＃1を編集

あなたはできる Clear All Selectedこの呼び出しによる（ヌル値の適用）​​：

$("#dynamicAttributes").val(null).trigger("change");

オンボタン：

$('#btnReset').click(function() {
    $("#dynamicAttributes").val(null).trigger("change"); 
});

更新Fiddle＃2

60
Shady Alset

選択した値を選択ポップアップリストに表示されないようにする方法を見つけました

ドキュメントには、イベントのリストがあります Select2 events

open

これらのselect2イベントを使用して、選択した値を非表示にします

JavaScriptは次のとおりです::

$(document).ready(function() {

  $('#dynamicAttributes').select2({
      allowClear: true,
      minimumResultsForSearch: -1,
      width: 600
  });

  // override the select2 open event
  $('#dynamicAttributes').on('select2:open', function () {
    // get values of selected option
    var values = $(this).val();
    // get the pop up selection
    var pop_up_selection = $('.select2-results__options');

    if (values != null ) {
      // hide the selected values
       pop_up_selection.find("li[aria-selected=true]").hide();

    } else {
      // show all the selection values
      pop_up_selection.find("li[aria-selected=true]").show();
    }

  });

});

[〜＃〜] demo [〜＃〜]

それが役に立てば幸い。

2
Oli Soproni B.

私のソリューションは＃3158行のselect2.js（コア、バージョン4.0.3）を修正しました。次の検証を追加します。

if ($option[0].selected == true) {
      return;
}

この検証により、選択したものをドロップダウンリストから除外できます。また、選択したオプションの名前を書くと、オプション「noResult」のテキストが表示されます。

ここに完全なコード：

SelectAdapter.prototype.query = function (params, callback) {
    var data = [];
    var self = this;

    var $options = this.$element.children();

    $options.each(function () {
      var $option = $(this);    
      if (!$option.is('option') && !$option.is('optgroup') ) {
        return;
      }

      if ($option[0].selected == true) {
           return;
      }

      var option = self.item($option);    
      var matches = self.matches(params, option);    
      if (matches !== null) {
        data.Push(matches);
      }
    });

    callback({
      results: data
    });
  };
1
Javier
$(document).ready(function(){
  $('#dynamicAttributes').select2({
        allowClear: true,
        minimumResultsForSearch: -1,
        width: 600
  });
});

記号の削除ボタンをクリックするとエラーが発生します

TypeError：this.placeholderは未定義です

つかいます

 $(document).ready(function(){
      $('#dynamicAttributes').select2({
            allowClear: true,
            minimumResultsForSearch: -1,
            width: 600,
            placeholder: 'past your placeholder'

      });
});
0
Avat Rezaei

選択した値を非表示にするもう1つの方法は、値が選択済みとしてマークされているときにreturn nullに dropdown templateResult オプションを使用することです。

function hideSelected(value) {
  if (value && !value.selected) {
    return $('<span>' + value.text + '</span>');
  }
}

$(document).ready(function() {
  $('#dynamicAttributes').select2({
    allowClear: true,
    placeholder: {
      id: "",
      placeholder: "Leave blank to ..."
    },
    minimumResultsForSearch: -1,
    width: 600,
    templateResult: hideSelected,
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/js/select2.min.js"></script>

<select id="dynamicAttributes" multiple="true" data-tags="true">
  <option value="1">A</option>
  <option value="2">B</option>
  <option value="3">C</option>
</select>
0
fyrye