選択したアイテムをデフォルトにリセットする最良の方法は何でしょうか？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>
私はこのようなことを試してみます：
$(function(){
$("#searchclear").click(function(){
$("#d").select2('val', 'All');
});
});
select2値をリセットすることもできます
$(function() {
$('#d').select2('data', null)
})
'allowClear': trueまたは、select2を呼び出すときに渡すことができ、値をリセットするためのXボタンがあります。
$('#d').val('').trigger('change');
これは、デバッグモードでスローされる非推奨のメッセージによると、今後の正しい解決策です。「このselect2("val")メソッドは非推奨になり、以降のSelect2バージョンで削除されます。$element.val()代わりに使用してください。」
ここに記載されている最新バージョン（select2 3.4.5）によると、次のように簡単です。
$("#my_select").select2("val", "");
使用できます：
$("#d").val(null).trigger("change");
とてもシンプルで正しく機能します！リセットボタンと一緒に使用する場合：
$('#btnReset').click(function() {
$("#d").val(null).trigger("change");
});
それを行うための最良の方法は次のとおりです。
$('#e1.select2-offscreen').empty(); //#e1 : select 2 ID
$('#e1').append(new Option()); // to add the placeholder and the allow clear
3つの問題があります。
value「すべて」オプションには属性がありません。まず、この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=""を「すべて」オプションに追加する場合は、DanielDenerによって提供されたコードを使用できます。
$("#d").select2('val', '');
「すべて」オプションが無効になっていない場合は、Select2を強制的に更新する必要があります。この場合、次を使用できます。
$('#d').change();
注：Lenartによる次のコードは選択をクリアする方法ですが、「すべて」オプションが選択されることはありません。
$('#d').select2('data', null)
選択ウィジェットが設定されている場合、次に例を示します。
<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());
}
私がうまく機能していることがわかったのは次のとおりです。
「すべて」や「-選択-」などのプレースホルダーオプションとその最初のオプションがあり、「リセット」したときに値を設定する場合は、次を使用できます。
$('#id').select2('val',0);
0は基本的に、リセット時に設定するオプションです。最後のオプションに設定する場合は、オプションの長さを取得し、その長さを設定します-1。基本的に、リセット時にselect2値を設定するオプションのインデックスを使用します。
プレースホルダーがなく、フィールドにテキストを表示したくない場合は、次を使用します。
$('#id').select2('val','');
それにだけ:)
$('#form-edit').trigger("reset");
$('#form-edit').find('select').each(function(){
$(this).change();
});
一般的な解決策を実現するには、次のことを行ってください。
$(':reset').live('click', function(){
var $r = $(this);
setTimeout(function(){
$r.closest('form').find('.select2-offscreen').trigger('change');
}, 10);
});
このように：アプリケーションのselect2ごとに新しいロジックを作成する必要はありません。
また、デフォルト値を知る必要はありません（ちなみに、これ""は最初のオプションである必要はありません）。
最後に、値をに設定すると、選択され:selectedた電流がクライアントでプログラムによって設定されている可能性があるため、常に真のリセットが達成されるとは限りません。一方、のデフォルトのアクションは、入力要素の値をサーバーから送信された値に返すことです。form select
編集：
あるいは、の非推奨ステータスを考慮してlive、最初の行を次のように置き換えることができます：
$('form:has(:reset)').on('click', ':reset', function(){
またはそれ以上：
$('form:has(:reset)').on('reset', function(){
PS：個人的には、リセット時のリセット、および元のselectに関連付けられたトリガーblurとfocusイベントは、select2で最も目立つ「欠落」機能の一部であると感じています。
Select2は特定のCSSクラスを使用するため、リセットする簡単な方法は次のとおりです。
$('.select2-container').select2('val', '');
また、同じフォームに複数のSelect2がある場合、この1つのコマンドですべてがリセットされるという利点があります。
Select2をリセットしたいのですが、change（）メソッドなしではリセットできません。だから私の解決策は：
function resetSelect2Wrapper(el, value){
$(el).val(value);
$(el).select2({
minimumResultsForSearch: -1,
language: "fr"
});
}
使用：
resetSelect2Wrapper("#mySelectId", "myValue");
私にとっては、これらのソリューションのいずれかでのみ機能します
$(this).select2('val', null);
また
$(this).select2('val', '');
// 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');
});
});
編集ページでフォームをリセットする場合は、このボタンをフォームに追加できます
<button type="reset" class="btn btn-default" onclick="resetForm()">Reset</button>
次のようにJSコードを記述します。
function resetForm() {
setTimeout(function() {
$('.js-select2').each(function () {
$(this).change();
/* or use two lines below instead */
// var oldVal = $(this).val();
// $(this).select2({'val': oldVal});
});
}, 100);
}
素晴らしい答えがたくさんありますが、最新バージョンではどれもうまくいきませんでした。すべてのselect2の汎用ソリューションが必要な場合、これは完全に機能しています。
バージョン4.0.13をテスト
$(document).ready(function() {
$('form').on('reset', function(){
console.log('triggered reset');
const $r = $(this);
setTimeout(function(){
$r.closest('form').find('.select2-hidden-accessible').trigger('change');
}, 10);
});
});
すべてのオプション値を削除するには
$("#id").empty();