[JavaScript] bootstrap-select のセレクトボックスを選択状態にする
bootstrap-select は、Bootstrap のデフォルトデザインのセレクトボックスより、見た目をかっこよくしてくれる Bootstrap ライブラリ。 bootstrap-select で作ったセレクトボックスを選択済みの状態にしたいが、 select 要素の val に値をセットする普通のやり方だとうまくいかなかったので、解決法をメモ。
やりたいこと
セレクトボックス A で値が選択されたら、セレクトボックス B に同じ値をセットして選択済みの状態にするため、 jQuery でセレクトボックス A の値を取得し、セレクトボックス B にセットしたい。
普通のセレクトボックスなら、 val() に値をセットするだけで選択状態にできる。
id = "selectB" という select 要素があったらこう書ける。
// value はセットしたい値
$('#selectB').val(value);しかし、 bootstrap-select を使っていると（ val に値はセットされているようだが）、テキスト部分が変わらず、選択状態にならない。
解決した方法
調べると 2 つの方法が見つかった。
方法 1
selectpicker で値をセットするにはこのように書くようだ。
$('.selectpicker').selectpicker('val', 'VALUE');
// 複数選択可にしている場合、
$('.selectpicker').selectpicker('val', ['VALUE1','VALUE2']);
$('.selectpicker').val('VALUE');
$('.selectpicker').selectpicker('render');
$('.selectpicker') は $('#id') でもいい。
change イベントは、ユーザー操作からのみ発火するため、直接 val() メソッドを呼び出しても bootstrap-select の ui は変化しないらしいが、この書き方だと ui 部分がリフレッシュされる。
方法 2
val をセットした後、リフレッシュする。
$('.selectpicker').val('VALUE');
$('.selectpicker').selectpicker('refresh');
val() メソッドを直接呼び出した場合には、 ui 部分が更新されるメソッドを、自分で呼び出さなければならない。