bootstrap-selectの選択済み項目をJavaScriptで変更する際の注意点

bootstrap-selectプラグインを使ってドロップダウンリストを作成した場合は、JavaScriptで $("ドロップダウンリスト").val("変更したい値") で値を変更しただけでは表示が変更されない。
bootstrap-selectプラグインを使う場合は値のセットとは別に表示の変更を書く必要がある。

標準のドロップダウンリストは以下のようにすれば selected が変更され、表示も変更される。

html

<select name="vegetable" class="selectpicker">
   <option value="carrot">にんじん</option>
   <option value="onion" selected>たまねぎ</option>
   <option value="potato">じゃがいも</option>
   <option value="broccoli">ブロッコリー</option>
</select>

javascript

$("select[name=vegetable]").val("potato");
$(".selectpicker").selectpicker("render");

refresh でも表示の変更は可能だが、こちらはoption要素の追加・削除など、もっと高度な変更に使用するもののようだ。 ※参考サイト

$(".selectpicker").selectpicker("refresh");