web-dev-qa-db-ja.com

Select2は選択された値を表示しません

Select2は、リストからすべてのアイテムを正常にロードします。これは、ページのロード時に特定の値を選択しようとしたときに見つかった問題です。例：

:: select2を特定のhtml要素に入れます。すべてのアイテムがロードされても値は選択されません。

$('#my_id').select2();

::ページがロードされると、選択された特定のアイテムを表示しようとしていますが、選択されていてもselect2には表示されないため、期待どおりに機能しません。

$('#my_id').val('3'); //select the right option, but doesn't render it on page loads.

ページの読み込み時にポップアップする選択オプションを作成するにはどうすればよいですか？

前もって感謝します。

更新しました

::すべてのselect2アイテムをロードする方法（申し訳ありませんが、純粋なHTMLではなく、ヒスイ）：

label(for='category') Category
    span.required *
select(id='category', style='width:230px', name='category')
    option(value='') - Select -
    each cat in categories
        option(value='#{cat.id}') #{cat.description}

追伸：リストからすべてのアイテムが読み込まれます。

:: select2の初期化方法：

私のjavascriptに次の行コードを置くだけで成功します：

$('#category').select2();

::特定の値を選択する方法：

  • 最初の試み：

    $('#category').select2(
    {
        initSelection: function(element, callback) {
            callback($('#field-category').val());
        }
    }
);

  • 2回目の試行：

    $('#category').val($('#field-category').val());

追伸：#field-categoryの値は非表示の入力フィールドであり、正常に機能します。

みんなありがとう！

jquery-select2
34
Ito

initSelection オプションを使用して初期値を設定する必要があります。

事前定義のselect要素を使用してselect2を作成している場合、次の方法を使用できます。

$('select').select2().select2('val','3')

デモ： Fiddle

52
Arun P Johny

valの設定後にトリガーの変更を追加します。

$('#my_id').val('3').trigger('change');
27
Kokizzu

この問題に取り組む非常に簡単な方法は次のとおりです。

//Step1: Here assuming id of your selectbox is my_id, so this will add selected attribute to 1st option
$('#my_id option').eq(0).prop('selected',true);

//Step2: Now reinitialize your select box

//This will work, if you haven't initialized selectbox
$('#my_id').select2();

または

//This will work, if you have initialized selectbox earlier, so destroy it first and initialise it
$('#my_id').select2('destroy').select2();
3
Raj Soni

これは役立つかもしれません：

$('#mySelect2').val('1'); // Select the option with a value of '1'
$('#mySelect2').trigger('change'); // Notify any JS components that the value changed

詳細については、こちらをご覧ください こちら ：

ありがとう

1
Sushil Adhikari

here initSelectionは、Select2 4.0以降では非推奨です。

Select2 4.0.0を使用すると、これは私にとってうまくいきました：

$('#my_id').select2({val:3});

HT：@Kokizzu

0
Patrick

私にとっては、データセットで選択したまま送信していましたが、デフォルトのオプションは選択されていませんでした。私はそれを機能させるために以下のようなことをしなければなりませんでした-

$(".select").select2({
    data: data_names
});
data_names.forEach(function(name) {
    if (name.selected) {
        $(".select").select2('val', name.id);
    }
});
0
Aniket Thakur

複数の選択がある複数のselect2ボックスがありました。

ステップ1では、school_idの文字列を各学校のidに対応する整数の配列に入れ、先頭のゼロを削除しました。これを別のスクリプトタグで行う必要がありました。

<script>
    var school_ids = <%= raw JSON.parse(@search.school_ids).map{|x| x.to_i} - [0]%>
</script>

ステップ2は、選択ボックスを作成し、値を設定して、次のようにトリガーすることでした。

<script>
$(document).ready(function() {
        $('.select2-multiple').select2({
            placeholder: "Hit Enter After Selection",
            width: 'resolve'
        });
        $('.select2-multiple').val(school_ids);
        $('.select2-multiple').trigger('change');
</script>
0
tomb

Select2でvalに対応する要素を選択させる方法は次のとおりです。何らかの理由で、select2はidで選択を検索する機能を提供しません。

その中に：

$("#thing").select2({data:sources, initSelection: function(item, callback) {
  // despite select2 having already read the whole sources list when you 
  // do .val(n) you have to explicitly tell it how to find that item again.
  var to_be_selected = null;
  $.each(sources, function(index, thing) {
    if (thing.id == item.val()) {
      to_be_selected = thing;
      return;
    }
  })
  callback(to_be_selected);
}})

通常のコード

// to load the thing with id==3 from the initial sources list.
$("#thing").select2({'val': 3})
0
fastmultiplication

私は同じ問題に遭遇しますが、これは私にとってはうまくいきます：

Using Select2 4.0.0
$("#slect_id").val('3').trigger("change")
0
mmary