bootstrap-selectでJavaScriptから任意の項目を選択済みにする方法

bootstrapのbootstrap-selectプラグインを使ってドロップダウンリストを作った場合、通常のHTMLのタグのようにselected属性をセットしても選択済みにはなりません。

任意の項目を選択済みにしたい場合は、のvalue属性に選択済みにしたい項目のvalue属性の値をセットした上で、selectpicker('refresh')を呼び出してリフレッシュします。

次のようにすると「BLUE」が選択済みの状態になります。selectpicker('refresh')をしないと表示に反映されない場合があります。

HTML

<select name="color" class="selectpicker">
   <option value="red">RED</option>
   <option value="green">GREEN</option>
   <option value="blue">BLUE</option>
   <option value="yellow">YELLOW</option>
</select>

JavaScript

$('select[name=color]').val("blue");
$('.selectpicker').selectpicker('refresh');

複数選択ができるドロップダウンリストの場合は、次のようにvalueに配列をセットします。

HTML

<select name="color" class="selectpicker" multiple>
   <option value="red">RED</option>
   <option value="green">GREEN</option>
   <option value="blue">BLUE</option>
   <option value="yellow">YELLOW</option>
</select>

JavaScript

$('select[name=color-multi]').val(["yellow","green","red"]);
$('.selectpicker').selectpicker('refresh');

ちなみに、展開後のDOMの状態をChromeのインスペクタで見てみたら次のような感じになっていました。
選択済みのフラグは、optionの属性としてではなく、data-original-indexというカスタムデータ属性を持ったliタグにclass属性の値としてセットされるようです。

<div class="btn-group bootstrap-select">
	<button type="button" class="btn dropdown-toggle btn-default" data-toggle="dropdown" role="button" title="BLUE">
		<span class="filter-option pull-left">BLUE</span>&nbsp;
		<span class="bs-caret"><span class="caret">
		</span></span>
	</button>
	<div class="dropdown-menu open" role="combobox">
		<ul class="dropdown-menu inner" role="listbox" aria-expanded="false">
			<li data-original-index="0"><a tabindex="0" class="" data-tokens="null" role="option" aria-disabled="false" aria-selected="false"><span class="text">RED</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li>
			<li data-original-index="1"><a tabindex="0" class="" data-tokens="null" role="option" aria-disabled="false" aria-selected="false"><span class="text">GREEN</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li>
			<li data-original-index="2" class="selected"><a tabindex="0" class="" data-tokens="null" role="option" aria-disabled="false" aria-selected="true"><span class="text">BLUE</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li>
			<li data-original-index="3"><a tabindex="0" class="" data-tokens="null" role="option" aria-disabled="false" aria-selected="false"><span class="text">YELLOW</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li>
		</ul>
	</div>
	<select name="color" class="selectpicker" data_liveedit_tagid="0x00007fbeb701cc70" tabindex="-98">
   		<option value="red" data_liveedit_tagid="0x00007fbeb701ced0">RED</option>
   		<option value="green" data_liveedit_tagid="0x00007fbeb701d260">GREEN</option>
   		<option value="blue" data_liveedit_tagid="0x00007fbeb701d5f0">BLUE</option>
   		<option value="yellow" data_liveedit_tagid="0x00007fbeb701d980">YELLOW</option>
	</select>
</div>