やりたいこと

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

エラー内容

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

原因

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

解決策

１．refreshする必要がある
２．少し時間差（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);
}

参考