ドロップダウン

ドロップダウンはselectで記述するとulを使ったリストに変換されます。
ドロップダウンの実装には、bootstrap-select.jsプラグインを利用しています。

ベーシックなドロップダウン

選択肢の分類や特殊な項目の表示分けができます。

#dropdown_basic

ラベル

<div class="form-group">
  <label><span class="label-text">ラベル</span></label>
  <select name="input" class="select-block">
    <option value="0">項目1</option>
    <option value="1">項目2</option>
    <option value="2">項目3</option>
  </select>
</div>

ドロップダウン内の項目をグループ分けする場合

#dropdown_group

ラベル

<div class="form-group">
  <label><span class="label-text">ラベル</span></label>
  <select name="input" class="select-block">
    <optgroup label="区分1">
      <option value="0">項目1</option>
      <option value="1">項目1</option>
    </optgroup>
    <optgroup label="区分2">
      <option value="2">項目3</option>
      <option value="3">項目4</option>
      <option value="4" class="highlighted">ログアウトなど特殊な項目</option>
    </optgroup>
  </select>
</div>

ドロップダウンのサイズ

#dropdown_basic_hg

#dropdown_basic_lg

#dropdown_basic

#dropdown_basic_sm

#dropdown_basic_xs

<select name="input" class="select-block select-hg">
  <option value="1">項目1</option>
  <option value="2">項目2</option>
</select>
<select name="input" class="select-block select-lg">
  <option value="1">項目1</option>
  <option value="2">項目2</option>
</select>
<select name="input" class="select-block">
  <option value="1">項目1</option>
  <option value="2">項目2</option>
</select>
<select name="input" class="select-block select-sm">
  <option value="1">項目1</option>
  <option value="2">項目2</option>
</select>
<select name="input" class="select-block select-xs">
  <option value="1">項目1</option>
  <option value="2">項目2</option>
</select>

複数選択ドロップダウン

#dropdown_multiple

ラベル

<div class="form-group">
  <label><span class="label-text">ラベル</span></label>
  <select multiple="multiple" name="input" class="select-block" title="何も選択されていません" data-selected-text-format="count > 4" data-count-selected-text="すべて">
    <option value="0">項目1</option>
    <option value="1" selected>項目2</option>
    <option value="2" selected>項目3</option>
    <option value="3" selected>項目4</option>
    <option value="4">項目5</option>
  </select>
</div>

<select>にBootstrap-Selectのオプションとして用意されているdata-selected-text-formatを指定して、すべて選択した場合に「すべて」と表示します。data-selected-text-format="count > x"のxには、項目数から1を引いた整数を入れます。

絞り込み付きドロップダウン

#dropdown_filter

ラベル

<div class="form-group">
  <label><span class="label-text">ラベル</span></label>
  <select name="input" data-group="from-01" class="select-block" data-live-search="true">
    <option value="0">項目1</option>
    <option value="1">項目2</option>
    <option value="2">項目3</option>
    <option value="3">項目4</option>
    <option value="4">項目5</option>
  </select>
</div>

<select>にBootstrap-Selectのオプションとして用意されているdata-live-search="true"を指定します。

入力可能ドロップダウン（コンボボックス）

#dropdown_combobox

ラベル

<div class="form-group combobox">
  <label><span class="label-text">ラベル</span></label>
  <input type="text" placeholder="入力または選択" class="form-control">
  <select name="input" class="select-block">
    <option value="0">項目1</option>
    <option value="1">項目2</option>
    <option value="2">項目3</option>
  </select>
</div>