PIYO - Tech & Life -

Webで複数選択するためのBootstrap Dual Listboxが便利

JS Web

複数選択、通常のselectタグをmultipleにすれば選択可能ですが、あまりかっこよくないです。

<select name="list" size="10" multiple>
<option value="1">選択肢1</option>
<option value="2">選択肢2</option>
<option value="3">選択肢3</option>
<option value="4">選択肢4</option>
<option value="5">選択肢5</option>
</select>

そこでDual Listboxです。

Bootstrap Dual Listbox
Responsive dual select boxes (dual list boxes) for Bootstrap.
www.virtuosoft.eu

こちらはBootstrapベースのコントロールで、左右に並んだリストがあって選択済みを右側のリストに入れていくようなコントロールです。

<select name="list2" id="duallistbox" size="10" multiple>
<option value="1">選択肢1</option>
<option value="2">選択肢2</option>
<option value="3">選択肢3</option>
<option value="4">選択肢4</option>
<option value="5">選択肢5</option>
</select>

<script>
$(document).ready(function(){
  $("#duallistbox").bootstrapDualListbox({
  });
});
</script>

右側が選択済みのリストです。通常のselectタグだとctrlやcmdを押しながらクリックしてないといけないですが、DualListboxだとクリックだけで追加削除ができます。

その他一括追加や絞り込みなどいろいろな機能を必要に応じて有効にできます。