select2で選択した項目を非表示にする

Question

select2 jQueryプラグインを使用して、HTMLアプリケーションのselect要素を強化しようとしています。複数のアイテムを選択できるようにするを選択します。

現在、ドロップダウンから選択しているアイテムを削除します。私はドキュメントで明白な解決策を見つけられませんでした。

私が見つけた現在の解決策は、templateResultオプションを使用して、テンプレート関数がnullを返すようにしました。これにより、Results.prototype.templateファンクションはcontainer.style.display = 'none'に設定されますが、これはキーボードが表示されていなくてもそれらのアイテムを選択するという副作用があります。

Answer 1

ハカムフォストクが提供する答えhereを確認してください。

私は完全を期すため、ここの下に彼の答えを再現しました：

私のソリューションは、ライン＃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 
}); 
}; 

、私はselect2.jsファイルを使用していたので、私はちょうどこのCSSを適用ライン3195.

Answer 2

で変更を行いました。

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

Source