bootstrap-selectで選択状態にしたい

Question

bootstrap-selectを使ってセレクトボックスを作成しました。
画面上に同じ値が表示されていれば、セレクトボックスの値を選択状態にし、表示がなければセレクトボックスから値を削除したいのですが、
同じname属性の中で複数の値が表示されている時に、セレクトボックスの値が複数選択状態になりません。

下記で言うと、サンプル1とサンプル2の両方を選択状態にしたいのですが、
サンプル2の方しか選択状態になりません。

どなたかご教授願います。

<div class="col-sm-2 col-md-2 col-lg-2">
　<div class="form-group">
　　<label class="hidden-xs"><span class="label-text">&nbsp;</span></label>
　　<select multiple="multiple" name="hoge" class="select-block selectpicker" title="タイトル" data-selected-text-format="count > 0" data-count-selected-text="タイトル">
　　　<option value="0" class="hoge_0" id="hoge_0">サンプル1</option>
     <option value="1" class="hoge_1" id="hoge_1">サンプル2</option>
    </select>
  </div>
 </div>

<ul>タイトル
　<li class="list-hoge_0">サンプル1</li>
　<li class="list-hoge_1">サンプル2</li>
</ul>

$(function() {
if($('.list-hoge_0').length) {
    $('select[name=hoge]').val("0");
    $('.selectpicker').selectpicker('refresh');
  } else {
    $('select[name=hoge]').find("[value=0]").remove();
  }
  if($('.list-hoge_1').length) {
    $('select[name=hoge]').val("1");
    $('.selectpicker').selectpicker('refresh');
  } else {
    $('select[name=hoge]').find("[value=1]").remove();
  }
});

Answer 1

$('select[name=hoge]').val()は選択状態が配列で表現されていますので、選択状態を追加するには値をpushした配列をセットしてやらなければならない。質問文の書き方では 0 か 1 で上書きされてしまいます。

if($('.list-hoge_0').length) {
	var v = $('select[name=hoge]').val();  // 現在の選択状態の配列を取ってきて
  v.push("0");                             // 選択したいアイテムの値をpushして
  $('select[name=hoge]').val(v);           // もう一度セットする

もっとスマートな書き方があるかもしれないけどとりあえずこんな感じで動かせます。

Comments

[i-nr]

解決いたしました！
ありがとうございます！