About select box

For adding a select box, include bootstrap-formhelpers-selectbox.js once alongside the other JS files.

Use cases

Simple example for adding a select box

<div class="bfh-selectbox">
  <input type="hidden" name="selectbox1" value="">
  <a class="bfh-selectbox-toggle" role="button" data-toggle="bfh-selectbox" href="#">
    <span class="bfh-selectbox-option input-medium" data-option="12">Option 12</span>
    <b class="caret"></b>
  </a>
  <div class="bfh-selectbox-options">
  <div role="listbox">
    <ul role="option">
      <li><a tabindex="-1" href="#" data-option="1">Option 1</a></li>
      <li><a tabindex="-1" href="#" data-option="2">Option 2</a></li>
      <li><a tabindex="-1" href="#" data-option="3">Option 3</a></li>
      <li><a tabindex="-1" href="#" data-option="4">Option 4</a></li>
      <li><a tabindex="-1" href="#" data-option="5">Option 5</a></li>
      <li><a tabindex="-1" href="#" data-option="6">Option 6</a></li>
      <li><a tabindex="-1" href="#" data-option="7">Option 7</a></li>
      <li><a tabindex="-1" href="#" data-option="8">Option 8</a></li>
      <li><a tabindex="-1" href="#" data-option="9">Option 9</a></li>
      <li><a tabindex="-1" href="#" data-option="10">Option 10</a></li>
      <li><a tabindex="-1" href="#" data-option="11">Option 11</a></li>
      <li><a tabindex="-1" href="#" data-option="12">Option 12</a></li>
      <li><a tabindex="-1" href="#" data-option="13">Option 13</a></li>
      <li><a tabindex="-1" href="#" data-option="14">Option 14</a></li>
      <li><a tabindex="-1" href="#" data-option="15">Option 15</a></li>
    </ul>
    </div>
  </div>
</div>

Simple example for adding a select box and selecting a default option

<div class="bfh-selectbox">
  <input type="hidden" name="selectbox2" value="">
  <a class="bfh-selectbox-toggle" role="button" data-toggle="bfh-selectbox" href="#">
    <span class="bfh-selectbox-option input-medium" data-option="12">Option 12</span>
    <b class="caret"></b>
  </a>
  <div class="bfh-selectbox-options">
  <div role="listbox">
    <ul role="option">
      <li><a tabindex="-1" href="#" data-option="1">Option 1</a></li>
      <li><a tabindex="-1" href="#" data-option="2">Option 2</a></li>
      <li><a tabindex="-1" href="#" data-option="3">Option 3</a></li>
      <li><a tabindex="-1" href="#" data-option="4">Option 4</a></li>
      <li><a tabindex="-1" href="#" data-option="5">Option 5</a></li>
      <li><a tabindex="-1" href="#" data-option="6">Option 6</a></li>
      <li><a tabindex="-1" href="#" data-option="7">Option 7</a></li>
      <li><a tabindex="-1" href="#" data-option="8">Option 8</a></li>
      <li><a tabindex="-1" href="#" data-option="9">Option 9</a></li>
      <li><a tabindex="-1" href="#" data-option="10">Option 10</a></li>
      <li><a tabindex="-1" href="#" data-option="11">Option 11</a></li>
      <li><a tabindex="-1" href="#" data-option="12">Option 12</a></li>
      <li><a tabindex="-1" href="#" data-option="13">Option 13</a></li>
      <li><a tabindex="-1" href="#" data-option="14">Option 14</a></li>
      <li><a tabindex="-1" href="#" data-option="15">Option 15</a></li>
    </ul>
  </div>
  </div>
</div>

Simple example for adding a select box with a filter

<div class="bfh-selectbox">
  <input type="hidden" name="selectbox3" value="">
  <a class="bfh-selectbox-toggle" role="button" data-toggle="bfh-selectbox" href="#">
    <span class="bfh-selectbox-option input-medium" data-option="12">Option 12</span>
    <b class="caret"></b>
  </a>
  <div class="bfh-selectbox-options">
    <input type="text" class="bfh-selectbox-filter">
    <div role="listbox">
    <ul role="option">
      <li><a tabindex="-1" href="#" data-option="1">Option 1</a></li>
      <li><a tabindex="-1" href="#" data-option="2">Option 2</a></li>
      <li><a tabindex="-1" href="#" data-option="3">Option 3</a></li>
      <li><a tabindex="-1" href="#" data-option="4">Option 4</a></li>
      <li><a tabindex="-1" href="#" data-option="5">Option 5</a></li>
      <li><a tabindex="-1" href="#" data-option="6">Option 6</a></li>
      <li><a tabindex="-1" href="#" data-option="7">Option 7</a></li>
      <li><a tabindex="-1" href="#" data-option="8">Option 8</a></li>
      <li><a tabindex="-1" href="#" data-option="9">Option 9</a></li>
      <li><a tabindex="-1" href="#" data-option="10">Option 10</a></li>
      <li><a tabindex="-1" href="#" data-option="11">Option 11</a></li>
      <li><a tabindex="-1" href="#" data-option="12">Option 12</a></li>
      <li><a tabindex="-1" href="#" data-option="13">Option 13</a></li>
      <li><a tabindex="-1" href="#" data-option="14">Option 14</a></li>
      <li><a tabindex="-1" href="#" data-option="15">Option 15</a></li>
    </ul>
  </div>
  </div>
</div>