web-dev-qa-db-ja.com

リセットボタンでドロップダウンのSelect2値をリセットする

選択したアイテムをデフォルトにリセットする最良の方法は何ですか？ Select2ライブラリを使用していますが、通常のボタンtype="reset"を使用すると、ドロップダウンの値がリセットされません。

したがって、ボタンを押すと、「すべて」が再び表示されます。

jQuery

$("#d").select2();

html

<select id="d" name="d">
  <option selected disabled>All</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>
javascripthtmlformsjquery-select2
59
J2B

私はこのようなことを試してみます：

$(function(){
    $("#searchclear").click(function(){
        $("#d").select2('val', 'All');
    });
});
63
thtsigma

次を使用してselect2値をリセットすることもできます

$(function() {
  $('#d').select2('data', null)
})

あるいは、select2を呼び出すときに'allowClear': trueを渡すことができ、その値をリセットするためのXボタンがあります。

61
Lenart

バージョン4.0

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

デバッグモードでスローされる非推奨メッセージによると、これは今後の正しいソリューションです。「select2("val")メソッドは非推奨になり、Select2以降のバージョンでは削除されます。代わりに$element.val()を使用してください」

32
Ondrej Henek

here で文書化された最新バージョン（select2 3.4.5）によると、次のように簡単になります。

 $("#my_select").select2("val", "");
32
Daniel Dener

あなたが使用することができます：

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

それは非常にシンプルで正しく動作します！リセットボタンで使用する場合：

$('#btnReset').click(function() {
    $("#d").val(null).trigger("change"); 
});
18
Hoàng Vũ Tgtt

最善の方法は次のとおりです。

$('#e1.select2-offscreen').empty(); //#e1 : select 2 ID
$('#e1').append(new Option()); // to add the placeholder and the allow clear
7
anonymous anonymous

次の3つの問題があります。

  1. Select2コントロールの表示は、フォームのリセットにより値が変更されても更新されません。
  2. 「すべて」オプションにはvalue属性がありません。
  3. 「すべて」オプションは無効になっています。

まず、setTimeout関数を使用して、フォームのリセットが完了した後にコードが実行されるようにすることをお勧めします。

ボタンがクリックされたときにコードを実行できます。

$('#searchclear').click(function() {
    setTimeout(function() {
        // Code goes here.
    }, 0);
});

または、フォームがリセットされたとき：

$('form').on('reset', function() {
    setTimeout(function() {
        // Code goes here.
    }, 0);
});

使用するコードは：

「すべて」オプションが無効になっているため、フォームをリセットしても選択された値にはなりません。したがって、選択した値になるように明示的に設定する必要があります。これを行う方法は、Select2の「val」関数を使用することです。また、「すべて」オプションにはvalue属性がないため、その値はそのテキスト（「すべて」）と同じです。したがって、選択した回答でthtsigmaによって指定されたコードを使用する必要があります。

$("#d").select2('val', 'All');

属性value=""を[すべて]オプションに追加する場合、Daniel Denerが提供するコードを使用できます。

$("#d").select2('val', '');

[すべて]オプションが無効になっていない場合は、Select2を強制的に更新する必要があります。その場合は、次を使用できます。

$('#d').change();

注：Lenartによる次のコードは、選択をクリアする方法ですが、「すべて」オプションが選択されることはありません。

$('#d').select2('data', null)
6
John S

入力された選択ウィジェットがある場合、例えば：

<select>
    <option value="1">one</option>
    <option value="2" selected="selected">two</option>
    <option value="3">three</option>
    ...

ネイティブフォームの動作と同様に、select2をリセットして、リセット時に最初に選択された値を復元する必要があります。これを実現するには、最初にネイティブフォームをリセットしてからselect2を更新します。

$('button[type="reset"]').click(function(event) {
    // Make sure we reset the native form first
    event.preventDefault();
    $(this).closest('form').get(0).reset();
    // And then update select2 to match
    $('#d').select2('val', $('#d').find(':selected').val());
}
4
nurikabe

私がうまくいったのは次のとおりです。

'All'や '-Select-'などのプレースホルダーオプションがあり、その最初のオプションがあり、それが 'reset'のときに値を設定したい場合

$('#id').select2('val',0);

0は基本的に、リセット時に設定するオプションです。最後のオプションに設定する場合は、オプションの長さを取得して、その長さを設定します-基本的に、select2値をリセット時に設定するオプションのインデックスを使用します。

プレースホルダーがなく、フィールドにテキストを表示しない場合は、次を使用します。

$('#id').select2('val','');
2
Guito339

一般的なソリューションを実現するために、これを行わないでください：

$(':reset').live('click', function(){
    var $r = $(this);
    setTimeout(function(){ 
        $r.closest('form').find('.select2-offscreen').trigger('change'); 
    }, 10);
});

この方法：アプリケーションのselect2ごとに新しいロジックを作成する必要はありません。

そして、デフォルト値を知る必要はありません（ちなみに、""または最初のオプションである必要はありません）

最後に、値を:selectedに設定すると、現在のselectedがクライアント上でプログラムで設定されている可能性があるため、常に真のリセットが得られるとは限りません。 、form selectのデフォルトのアクションは、入力要素の値をサーバーが送信した値に返すことです。

EDIT：あるいは、liveの非推奨ステータスを考慮すると、最初の行を次のように置き換えることができます。

$('form:has(:reset)').on('click', ':reset', function(){

またはそれ以上：

$('form:has(:reset)').on('reset', function(){

PS：リセット時にリセットすること、および元の選択に関連付けられたblurおよびfocusイベントをトリガーすることは、最も目立つ「欠落」機能の一部であると個人的に感じていますselect2！

1
Ifedi Okonkwo
    // Store default values
    $('#filter_form [data-plugin="select2"]').each(function(i, el){
        $(el).data("seldefault", $(el).find(":selected").val());
        });

    // Reset button action
    $('#formresetbtn').on('click', function() {
        $('#filter_form [data-plugin="select2"]').each(function(i, el){
            $(el).val($(el).data("seldefault")).trigger('change');
            });
        });
0
Ivan Savin

私にとっては、これらのソリューションのいずれかでのみ動作します

$(this).select2('val', null);

または

$(this).select2('val', '');
0
Mo.

Select2は特定のCSSクラスを使用するため、簡単にリセットする方法は次のとおりです。

$('.select2-container').select2('val', '');

また、同じフォームに複数のSelect2がある場合、これらすべてがこの単一のコマンドでリセットされるという利点があります。

0
Marcio Mazzucato

Select2をリセットしたい場合もありますが、change（）メソッドなしではできません。だから私の解決策は：

function resetSelect2Wrapper(el, value){
    $(el).val(value);
    $(el).select2({
        minimumResultsForSearch: -1,
        language: "fr"
    });
}

を使用して：

resetSelect2Wrapper("#mySelectId", "myValue");
0
Koks_rs