web-dev-qa-db-ja.com

select2コントロールを完全にクリーニングする方法は？

私は素晴らしい select2コントロール で作業しています。

私もコンテンツでselect2をきれいにして無効にしようとしていますので、これを行います：

$("#select2id").empty();
$("#select2id").select2("disable");

OK、それは機能しますが、値を選択していた場合、すべてのアイテムが削除され、コントロールは無効になりますが、選択した値は表示されたままです。すべてのコンテンツをクリアして、プレースホルダーが表示されるようにします。問題を確認できる場所の例を次に示します。 http://jsfiddle.net/BSEXM/

HTML：

<select id="sel" data-placeholder="This is my placeholder">
    <option></option>
    <option value="a">hello</option>
    <option value="b">all</option>
    <option value="c">stack</option>
    <option value="c">overflow</option>
</select>
<br>
<button id="pres">Disable and clear</button>
<button id="ena">Enable</button>

コード：

$(document).ready(function () {
    $("#sel").select2();

    $("#pres").click(function () {
        $("#sel").empty();
        $("#sel").select2("disable");
    });

    $("#ena").click(function () {
        $("#sel").select2("enable");
    });
});

CSS：

#sel {
    margin: 20px;
}

これについて何かアイデアやアドバイスはありますか？

javascriptjqueryjquery-uijquery-select2
29
harrison4

なぜこのすべてのトラブル？

つかいます：

 $('#sel').select2('data', null);
28
Fernando Trindade

Select2で値を変更または変更するたびに、トリガーを使用してみてください（ "change"）

$('#sel').empty().trigger("change");

39
Paulo Araujo

Select2の公式ドキュメントからこれを試してください。

バージョン4

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

バージョンの場合.5.

$("#sel").select2("val", "");
29
Sarath Kumar

Select2 v4.0（4.0.6-rc.0）を使用しています

以下を使用すると、ドロップダウンフィールドのすべての値がクリアされます。

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

これを行うと完全に削除され、ページが更新されるまで再選択できません。

選択を削除するだけの場合は、次の手順を実行します。

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

現在選択されているオプションはクリアされ、ユーザーは目的のオプションを再選択できるようになります。

3
Jeff Sieffert

select2（> = v4）コンポーネントを完全に消去するには：

$('#sel').val(null).empty().select2('destroy')
  • val（null）-> selectフォームデータを削除
  • 空-> selectオプションを削除
  • select2（destroy）-> select2プラグインを削除

その後、必要に応じて、同じselect HTMLノードを使用して新しいselect2コンポーネントを作成できます。

1
Thomas Decaux

答えたように、サラ・クマール：

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

公式ドキュメントからの参照は、ここにリンクがあります：

https://select2.org/programmatic-control/add-select-clear-items#clearing-selections

1
Tigran Vardanyan

これを試してください：-http://jsfiddle.net/GqbSN/

  $(document).ready(function () {
    $("#sel").select2();

    $("#pres").click(function () {
      $('#s2id_sel > a > span').text($(sel).data('placeholder')); 
        //$('.select2-container > a > span').text('This is my placeholder');
        $("#sel").select2("disable");;
       });

    $("#ena").click(function () {
        $("#sel").select2("enable");
    });
});

注

$（ '＃s2id_sel> a>スパン'）.text（$（sel）.data（ 'placeholder'））;このプラグインを見て私が理解しているのは、＃s2id_ + "yourselectelementid"としてidを生成するために提供するselectから作成されるマークアップです。したがって、複数の選択コントロールがあり、それらの一部または1つのみを無効にしたい場合、これを使用するより良い方法です。

選択した内容をクリアしたい場合：- http://jsfiddle.net/G7TXj/

1
PSL

「すべて」への最初のオプションの私のselect2。このオプションは他のオプションをクリアし、最初のオプションが選択されます

var $eventSelect = $("#storeList");
   $("#storeList").on("change", function (e) {
        if (e.added != undefined) {
            if (e.added.id == 0 && e.val.length>1) {
                   removeTags();
                $("#storeList").val('0').select2();

            }

        }

    });

  function removeTags(){
        $eventSelect.select2('data', null);

    }
0
gokhan duralı