web-dev-qa-db-ja.com

JQuery select2はリストのオプションからデフォルト値を設定しますか？

JQuery Select2プラグインを使用して、select要素のデフォルト/選択された値を設定できるようにしたい。

javascriptjqueryhtml-selectjquery-select2
52
user857276

もう1つの方法-selected = "selected"属性をselectマークアップに追加して、その上でselect2を呼び出すだけです。選択した値を取る必要があります。追加のJavaScriptは必要ありません。このような ：

マークアップ

<select class="select2">
   <option id="foo">Some Text</option>
   <option id="bar" selected="selected">Other Text</option>
</select>

JavaScript

$('select').select2(); //oh yes just this!

フィドルを参照してください： http://jsfiddle.net/6hZFU/

編集：（ありがとう、ジェイ・ヘイズ！）

これが機能しない場合は、次のように、select2のvalプロパティをnullに設定して、値をクリアしてみてください。

$('select').select2("val", null); //a lil' bit more :)

この後、valを"Whatever You Want"に設定するのは簡単です。

52
krishgopinath

これを達成する1つの方法は...

$('select').select2().select2('val', $('.select2 option:eq(1)').val());

したがって、基本的にプラグインを初期化してから、「val」パラメーターを使用してデフォルト値を指定します。実際の値は、指定されたオプション（この場合は＃1）から取得されます。したがって、この例から選択された値は「bar」になります。

<select class=".select2">
  <option id="foo">Some Text</option>
  <option id="bar">Other Text</option>
</select>

これが他の誰かに役立つことを願っています。

23
user857276
$("#id").select2("val", null); //this will not work..you can try

実際にこれを行う必要があります...初期化してから値を設定します。これは私にとってもうまくいく方法です.

$("#id").select2().select2("val", null);
$("#id").select2().select2("val", 'oneofthevaluehere');
23
rajesh_kw

上記の解決策は私にとってはうまくいきませんでしたが、Select2自身のWebサイトのこのコードはうまくいきました。

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

ここで見つかったWebページ

私のように、これが苦労している人の助けになることを願っています。

14
avebone

4.x versionの場合

$('#select2Id').val(__INDEX__).trigger('change');

INDEXで値を選択するには

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

何も選択しない（プレースホルダーがある場合は表示する）

7
Wishmaster

未来から来た？ ajaxソースのデフォルト値をお探しですか？

// Set up the Select2 control
$('#mySelect2').select2({
    ajax: {
        url: '/api/students'
    }
});

// Fetch the preselected item, and add to the control
var studentSelect = $('#mySelect2');
$.ajax({
    type: 'GET',
    url: '/api/students/s/' + studentId
}).then(function (data) {
    // create the option and append to Select2
    var option = new Option(data.full_name, data.id, true, true);
    studentSelect.append(option).trigger('change');

    // manually trigger the `select2:select` event
    studentSelect.trigger({
        type: 'select2:select',
        params: {
            data: data
        }
    });
});

どういたしまして。

リファレンス： https://select2.org/programmatic-control/add-select-clear-items#preselecting-options-in-an-remotely-sourced-ajax-select2

1
Brain90

他の人の問題を知らない、このコードだけが私のために働いた。

$('select').val('').select2();
0
Fahad Bhuyian