javascript - jQuerySelect2を使用してドロップダウンをクリアする

Question

素晴らしいSelect2ライブラリを使用して、プログラムでドロップダウンをクリアしようとしています。queryドロップダウンには、Select2オプションを使用したリモートajax呼び出しが動的に入力されます。

HTML：

<input id="remote" type="hidden" data-placeholder="Choose Something" />

Javascript：

        var $remote = $('#remote');

        $remote.select2({
            allowClear: true,
            minimumInputLength: 2,
            query: function(options){
                $.ajax({
                    dataType: 'json',
                    url: myURL + options.term,
                    error: function(jqXHR, textStatus, errorThrown){
                        smoke.alert(textStatus + ": server returned error on parsing arguments starting with " + options.term);
                    },
                    success: function(data, textStatus, jqXHR){
                        var results = [];
                        for(var i = 0; i < data.length; ++i){
                            results.push({id: data[i].id, text: data[i].name});
                        }

                        options.callback({results: results, more: false});
                    }
                });
            }
        });

残念ながら、の呼び出し$remove.select2('val', '')は次の例外をスローします。

 Uncaught Error: cannot call val() if initSelection() is not defined

、、、およびSelect2固有の機能をattr設定してみました。男を明確にし、ラジオボタンのように動作させることはできないようです。誰か提案がありますか？valtextdata

score 78 · Accepted Answer

これは私のために働きます：

 $remote.select2('data', {id: null, text: null})

また、そのようにクリアすると、jQuery検証でも機能します。

-編集2013-04-09

この回答を書いている時点では、それが唯一の方法でした。最近のパッチにより、適切でより良い方法が利用できるようになりました。

$remote.select2('data', null)

score 44 · Accepted Answer

Select2バージョン4以降の場合

構文が変更されたため、次のように記述する必要があります。

// clear all option
$('#select_with_blank_data').html('').select2({data: [{id: '', text: ''}]});

// clear and add new option
$("#select_with_data").html('').select2({data: [
 {id: '', text: ''},
 {id: '1', text: 'Facebook'},
 {id: '2', text: 'Youtube'},
 {id: '3', text: 'Instagram'},
 {id: '4', text: 'Pinterest'}]});

score 32 · Accepted Answer

これは適切なものです。select2は選択された値をクリアし、プレースホルダーを表示します。

$remote.select2('data', null)

score 25 · Accepted Answer

select2バージョン4の場合、これを簡単に使用できます。

$('#remote').empty();

select要素にajax呼び出しを入力した後、コンテンツを更新するために、成功セクションに次のコード行が必要になる場合があります。

  success: function(data, textStatus, jqXHR){
  $('#remote').change();
                }

score 18 · Accepted Answer

select2バージョン4を使用すると、次の短い表記を使用できます。

$('#remote').html('').select2({data: {id:null, text: null}});

これにより、null IDとテキストを含むjson配列が作成時にselect2に渡されますが、最初.html('')に、以前に保存された結果が空になります。

score 8 · Accepted Answer

8

これを使用する必要があります：

   $('#remote').val(null).trigger("change");

于 2016-08-05T08:08:28.430 に答える

score 6 · Accepted Answer

提案された方法@LelioFaietaは私のために働いていますが、私はブートストラップテーマを使用しているため、select2のすべてのブートストラップ設定を削除します。だから私は次のコードを使用しました：

$("#remote option").remove();

score 6 · Accepted Answer

これにより、バージョン3.5.2での問題が解決しました。

$remote.empty().append(new Option()).trigger('change');

この問題によると、プレースホルダーを表示するには、selectタグ内に空のオプションが必要です。

score 5 · Accepted Answer

私は少し遅れていますが、これは最後のバージョン（4.0.3）で機能しているものです：

$('#select_id').val('').trigger('change');

score 3 · Accepted Answer

これらは両方とも、ドロップダウンをクリアするために機能します。

.select2('data', null)
.select2('val', null)

ただし、重要な注意：値はリセットされません。.val（）は、選択されていない場合でも最初のオプションを返します。Select23.5.3を使用しています

score 1 · Accepted Answer

私はこの他の質問で探していた答え（user780178への賛辞）を見つけました：

select2値をリセットし、placeholdlerを表示します

$("#customers_select").select2("val", "");

score 1 · Accepted Answer

select2を実際にクリーンアップするには、>4.0から次の手順を実行する必要があります。

$remote.select2.val('');
$remote.select2.html('');
selectedValues = []; // if you have some variable where you store the values
$remote.select2.trigger("change");

最初の質問に基づいてselect2を選択することに注意してください。あなたの場合、おそらくあなたは別の方法でselect2を選択するでしょう。

それが役に立てば幸い。

score 1 · Accepted Answer

Ajaxの場合は、$（ "。select2"）。val（ ""）。trigger（ "change"）を使用します。それで問題は解決するはずです。

score 1 · Accepted Answer

このコードは、必要に応じて新しいリストを表示するためのすべての結果を削除します。

$('#select2Elem').data('select2').$results.children().remove()

たとえば、都道府県と市区町村のリストで、都道府県が変更され、都市の入力をクリックすると、新しいリストが読み込まれるまで、古い都市のリストが表示されたままになります。

私が書いたコードを使用すると、ajaxを呼び出す前に古いリストを削除できます

score 0 · Accepted Answer

それらのすべてが私のために働いたわけではないので（select2 4.0.3）、stdselectの方法になりました。

for(var i = selectbox.options.length - 1 ; i >= 0 ; i--)
    selectbox.remove(i);

score 0 · Accepted Answer

これを使用するか、これをさらに参照することができますhttps://select2.org/programmatic-control/add-select-clear-items

$('#mySelect2').val(null).trigger('change');

score 0 · Accepted Answer

0

これが私のやり方です：

$('#my_input').select2('destroy').val('').select2();

于 2018-04-04T11:14:13.060 に答える

javascript - jQuerySelect2を使用してドロップダウンをクリアする

17 に答える 17

Related

Reference