39

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}

PS：私のリストのすべてのアイテムが読み込まれます。

:: select2を初期化する方法：

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

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

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

  • 最初の試み：

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

  • 2回目の試行：

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

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

みんなありがとう！

4

11 に答える 11

55

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

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

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

デモ：フィドル

于 2013-02-19T12:28:52.137 に答える
35

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

$('#my_id').val('3').trigger('change');
于 2014-11-11T03:42:07.767 に答える
4

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

//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();
于 2018-02-13T06:25:36.587 に答える
3

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

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

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

ありがとう

于 2019-01-03T02:18:15.173 に答える
0

valselect2で対応する要素を選択する方法は次のとおりです。何らかの理由で、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})
于 2013-06-23T06:04:25.417 に答える
0

ここで、 initSelectionはSelect24.0以降で非推奨になりました。

Select2 4.0.0を使用すると、これでうまくいきました。

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

HT：@Kokizzu

于 2015-05-04T19:07:06.137 に答える
0

私は同じ問題に直面します、これは私のために働きます：</ p> 

Using Select2 > 4.0.0
$('#select_id').val('3').trigger('change');
于 2016-07-07T03:31:01.310 に答える
0

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

$(".select").select2({
    data: data_names
});
data_names.forEach(function(name) {
    if (name.selected) {
        $(".select").select2('val', name.id);
    }
});
于 2017-12-10T16:35:23.043 に答える
0

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

ステップ1は、school_idsの文字列を各学校の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>
于 2019-05-22T02:10:06.283 に答える
0

select2をトリガーして値を設定します

$('#my_id').val('3').trigger("change.select2");

これにより、ドロップダウンでselect2がトリガーされます

$('#my_id').val('3').trigger("change");
于 2020-02-19T15:44:27.787 に答える
0 
  var option=$(this);
   if(option.val()==data.StudentCourses.CourseId)
   {
    option.setAttribute('Selected');
   }
   });

select2を初期化したのは、それらからいくつかのオプションを選択したいだけだからです。

于 2020-10-06T06:56:40.787 に答える