web-dev-qa-db-ja.com

Select2の値をリセットしてプレースホルダを表示する

Select2でプレースホルダーを値リセットに設定するにはどうすればよいですか。私の例では、場所またはグレード選択ボックスがクリックされ、私のselect2の値がselect2の値よりリセットされ、デフォルトのプレースホルダーが表示されるはずです。このスクリプトは値をリセットしていますが、プレースホルダを表示しません

$("#locations, #grade ").change(function() {
   $('#e6').select2('data', {
     placeholder: "Studiengang wählen",
     id: null,
     text: ''
   });
});

$("#e6").select2({
   placeholder: "Studiengang wählen",
   width: 'resolve',
   id: function(e) {
     return e.subject;
   },
   minimumInputLength: 2,
   ajax: {
     url: "index.php?option=com_unis&task=search.locator&tmpl=component&<?php echo JSession::getFormToken() ?>=1",
     dataType: 'json',
     data: function(term, page) {
       return {
         q: term, // search term
         g: $('#grade option:selected').val(),
         o: $('#locations option:selected').val()
       };
     },
     results: function(data, page) {
       return {
         results: data
       };
     }
   },
   formatResult: subjectFormatResult,
   formatSelection: subjectFormatSelection,
   dropdownCssClass: "bigdrop",
   escapeMarkup: function(m) {
     return m;
   }
});
jquerytwitter-bootstrapjquery-select2
171
fefe

あなたはselect2を次のように定義しなければなりません。

$("#customers_select").select2({
    placeholder: "Select a customer",
    initSelection: function(element, callback) {                   
    }
});

Select2をリセットする

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

Select2がAPIを変更しました。

Select2：select2("val")メソッドは推奨されなくなり、それ以降のバージョンのSelect2では削除される予定です。代わりに$ element.val（）を使用してください。

今これをする最もよい方法は：

$('#your_select_input').val('');

編集：2016年12月 コメントは、以下がこれを行う最新の方法であることを示唆している。

$('#your_select_input').val([]);
110
user764357

私の場合、受け入れられた答えは機能しません。私はこれを試しています、そしてそれは働いています：

Select2を定義します。

$("#customers_select").select2({
    placeholder: "Select a State",
    allowClear: true
});

または

$("#customers_select").select2({
    placeholder: "Select a State"
});

リセットするには：

$("#customers_select").val('').trigger('change')

または

$("#customers_select").empty().trigger('change')
85
NorthCat

私のために働くことができる唯一のものは以下のとおりです。

$('select2element').val(null).trigger("change")

バージョン4.0.3を使用しています

参照

Select2ドキュメントによると

36
M.Tae

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

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

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

15
Marcio Mazzucato

これを使って ：

$('.select').val([]).trigger('change');
14
Sachin Gend

選択した値を削除する 

$('#employee_id').select2('val','');

オプション値をクリアするには 

$('#employee_id').html('');
10
Shanka SMS

私はこれが一種の古い質問であることを知っています、しかしこれはselect2バージョン4.0のために働きます

 $('#select2-element').val('').trigger('change');

または

$('#select2-element').val('').trigger('change.select2');

変更イベントがバインドされている場合

7
Sean

まず、あなたはこのようにselect2を定義しなければなりません：

$('#id').select2({
    placeholder: "Select groups...",
    allowClear: true,
    width: '100%',
})

Select2をリセットするには、単純に次のコードブロックを使用します。

$("#id > option").removeAttr("selected");
$("#id").trigger("change");
5
Mahmut Aydın

以下を使用してselect2を構成します。

    $('#selectelementid').select2({
        placeholder: "Please select an agent",
        allowClear: true // This is for clear get the clear button if wanted 
    });

プログラムで選択入力をクリアする

    $("#selectelementid").val("").trigger("change");
    $("#selectelementid").trigger("change");
4
Zabith Rafeek

これは正しい方法です。

 $("#customers_select").val('').trigger('change');

最新リリースのSelect2を使用しています。

4
TreeZ

選択を解除するには

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

しかし、それはあなたをあなたのプレースホルダーに戻すことはしません。

だからその半分の解決策

4
Rodrigo Butta

リモートデータをロードしているユーザーの場合、 this はajaxを起動せずにselect2をプレースホルダーにリセットします。 v4.0.3で動作します：

$("#lstProducts").val("").trigger("change.select2");
3
Chad Kuehn

私は上記の解決策を試しましたが、それは私のために働きませんでした。

これは一種のハックであり、あなたは変化を引き起こす必要はありません。

$("select").select2('destroy').val("").select2();

または

$("select").each(function () { //added a each loop here
        $(this).select2('destroy').val("").select2();
});
3
tech_boy

recommended のやり方に従って。ドキュメントにあります https://select2.github.io/options.html#my-first-option-is-being-displayed-instead-of-my-placeholder （これはかなり一般的な問題のようです） ）：

これが起こるとき、それは通常あなたがあなたの<option></option>の最初のオプションとして空白の<select>を持っていないことを意味します。

のように：

<select>
   <option></option>
   <option value="foo">your option 1</option>
   <option value="bar">your option 2</option>
   <option value="etc">...</option>
</select>
2
fmsf

私もこの問題を抱えていました、そしてそれはプレースホルダーがリセットされる前にval(null).trigger("change");がNo select2/compat/inputDataエラーを投げることから生じます。私はそれを解決してエラーをキャッチし、プレースホルダーを直接（幅と共に）設定しました。注意：複数の人がいる場合は、それぞれを捕まえる必要があります。

try{
    $("#sel_item_ID").select2().val(null).trigger("change");
}catch(err){
    console.debug(err)
}
try{
    $("#sel_location_ID").select2().val(null).trigger("change");
}catch(err){
    console.debug(err)
}
$('.select2-search__field')[0].placeholder='All Items';
$('.select2-search__field')[1].placeholder='All Locations';
$('.select2-search__field').width(173);

私はSelect2 4.0.3を実行しています

2
Aba

v.4.0.x以降...

値をクリアしますが、 も /プレースホルダーの使用を元に戻す...

.html('<option></option>');  // defaults to placeholder

空の場合は、最初のオプション項目が代わりに選択されます。

.html(''); // defaults to whatever item is first

率直に言って... Select2はお尻のそのような痛みです、それはそれが交換されていない私を驚かせます。

1
mangonights

プレースホルダー用

$("#stateID").select2({
    placeholder: "Select a State"
});

選択をリセットする2

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

お役に立てれば

1
Rinto George

Select2バージョン3.2を使って、これは私のために働きました：

$('#select2').select2("data", "");

initSelectionを実装する必要はありませんでした

1
shak

そのため、フォームをリセットするために、一部のユーザーにはリセットボタンがあります。スクリプトタグ内に次のコードを追加します

$('.your_btn_class').click(function(){
    $('#select_field_id').val([]);
    $("#select_field_id").select2({
    placeholder: "this is a placeholder",
    });
});

または、プレースホルダーを保持せずに選択フィールドを空にするだけです：

$('.your_btn_class').click(function(){
    $('#select_field_id').val([]);
 });
1
Alisha Lamichhane

私は上記の解決策を試しましたが、どれもバージョン4xで動きませんでした。

私が達成したいのは、次のとおりです。すべてのオプションをオフにしますが、プレースホルダーには触れないでください。このコードは私には役に立ちます。

selector.find('option:not(:first)').remove().trigger('change');
1
R. Canser Yanbakan

ここで最初の10の解決策を試して失敗した後、私は this 解決策がうまくいくことを見つけました（ "nilovは4月7日にコメントしました。"編集後のコメントを参照）。

(function ($) {
   $.fn.refreshDataSelect2 = function (data) {
       this.select2('data', data);

       // Update options
       var $select = $(this[0]);
       var options = data.map(function(item) {
           return '<option value="' + item.id + '">' + item.text + '</option>';
       });
       $select.html(options.join('')).change();
   };
})(jQuery);

その後、変更が行われます。

var data = [{ id: 1, text: 'some value' }];
$('.js-some-field').refreshDataSelect2(data);

（作者はもともとvar $select = $(this[1]);を示していましたが、これは私が上に示したvar $select = $(this[0]);に修正されました。）

0
guero64

このコードをjsファイルに使用してください。

$('#id').val('1');
$('#id').trigger('change');
0
Nhoufy

DOMインターフェースは、すでに初期状態を追跡しています...

したがって、次の手順を実行するだけで十分です。

$("#reset").on("click", function () {
    $('#my_select option').prop('selected', function() {
        return this.defaultSelected;
    });
});
0
Andrew Nartey

私の解決策は：

$el.off('select2:unselect')
$el.on('select2:unselect', function (event) {
    var $option = $('<option value="" selected></option>');
    var $selected = $(event.target);

    $selected.find('option:selected')
             .remove()
             .end()
             .append($option)
             .trigger('change');
    });
0
Daniel Ortegón
$('myselectdropdown').select2('val', '0')

0はドロップダウンの最初の値です。

0
Momaad Jamshed Alam

私はいつでも

$('myselectdropdown').select2('val', '').trigger('change');

3〜4回トリガーした後、ある種の遅れが出始めました。メモリリークがあると思います。これは私のコードの範囲外です。なぜなら、この行を削除したのであれば、私のアプリは遅れがないからです。

AllowClearオプションをtrueに設定したので、

$('.select2-selection__clear').trigger('mousedown');

その後に$（ 'myselectdropdown'）を続けることができます。開いている提案ドロップダウンを閉じたい場合に備えて、select2 dom要素のイベントトリガー。

0
Akhilesh Balachandder

この$("#customers_select").select2("val", "");を使って値をクリアする前に、リセットクリック時に他のコントロールにフォーカスを設定してみてください。

これにより、プレースホルダが再び表示されます。

0
user2243380

それをするための[非常に]厄介な方法（私はそれがバージョン4.0.3で動作するのを見ました）

var selection = $("#DelegateId").data("select2").selection;
var evt = document.createEvent("UIEvents");
selection._handleClear(evt);
selection.trigger("toggle", {});
  • allowClearはtrueに設定する必要があります
  • select要素には空のオプションが存在しなければならない
0
Ellery Newcomer

私はこの場合これを行います：

  $('#select').val('');
  $('.select2.select2-container').remove();
  $('.select2').select2();
  1. 選択値を空に変更します
  2. Select2のコンテナを削除します
  3. Select2を再呼び出し
0
Scramble

Select2バージョン4.0.9では、これが機能します。

$( "#myselect2" ).val('').trigger('change');
0
IlludiumPu36

他の誰かがこれを経験したかどうかはわかりませんが、コードがトリガーにぶつかると（「変更」）、JavaScriptが停止し、トリガーから戻ることはなくなり、残りの関数は実行されませんでした。

私はjquerysがこれを期待しているとは言いたくないと思っています。私はそれをsetTimeoutでラップすることでそれを回避しました。醜いですが効果的です。

0
rgvtim