[JavaScript] bootstrap-select のセレクトボックスを選択状態にする

2019-07-27JavaScriptBootstrap3, jQuery

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 部分が更新されるメソッドを、自分で呼び出さなければならない。

Posted by Agopeanuts