0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

bootstrap-select セレクトボックスにjavascriptで選択肢が反映されない、選択値が表示されない

Last updated at Posted at 2021-12-23

やりたいこと

bootstrap-selectを利用していたセレクトボックスに、他セレクトボックスを変更したタイミングで新しい選択肢をセットし、初期値設定して表示させたい。

エラー内容

1.選択肢がうまく表示されない
2.初期値セットはできているようだが、表示されない「nothing selected」

原因

bootstrap-select , selectpickerを使ったセレクトボックスであること

解決策

1.refreshする必要がある
2.少し時間差(0.1秒)をつけて、セットするようにすればうまく動いた

/**
 * 契約元セレクトボックス設定
 */
function setSelectList(contractorList) {
    // 一旦削除
    $('#contractor option').remove();

    // リストをセット
    $.each(contractorList, function(key, value) {
        $('#contractor').append($('<option>').html(value).val(key));
    })
    $('.selectpicker').selectpicker('refresh');

    // 「全て」を初期設定・表示する
    setTimeout(function () {
        $('#contractor').val('9999');
        $('.selectpicker').selectpicker('refresh');
    }, 100);
}

参考

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?