web-dev-qa-db-ja.com

jQuery Select2を使用してドロップダウンをクリアする

素晴らしい Select2 ライブラリを使用して、プログラムでドロップダウンをクリアしようとしています。ドロップダウンには、Select2 queryオプションを使用したリモート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

attr、val、text、およびSelect2固有のdata関数を設定しようとしました。男を明確にし、マナーのようなラジオボタンで作業することはできません。誰か提案がありますか？

javascriptjqueryjquery-select2
48
wheaties

これは私のために働く：

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

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

-2013-04-09を編集

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

$remote.select2('data', null)
74
Aktee

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'}]});
35
Sruit A.Suk

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

$remote.select2('data', null)
32
Dewey

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

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

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

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

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

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

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

15
Lelio Faieta

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

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

提案された方法@Lelio Faietaは私のために働いていますが、 bootstrap theme を使用しているため、select2のすべてのbootstrap設定を削除します。そこで、次のコードを使用しました。

$("#remote option").remove();
6
Viktor Shatilo

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

$('#select_id').val('').trigger('change');
5
Andres SK

これらの両方がドロップダウンをクリアするのに役立ちます：

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

しかし、重要な注意：値はリセットされません。val（）は、選択されていなくても最初のオプションを返します。 Select2 3.5.3を使用しています

3
realplay

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

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

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

1
Michał Szymański

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を選択します。

それが役に立てば幸い。

1
wazza

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

select2値をリセットしてプレースホルダーを表示

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

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

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

それらのすべてが私のために働いていなかったので（select2 4.0.3）、std selectの方法になりました。

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