About states

For adding a drop-down of states of a country or display state name from state and country code, include bootstrap-formhelpers-states.{language}.js and bootstrap-formhelpers-states.js once alongside the other JS files.

Use cases

Example for loading the list of states for a country and selecting a default state

<select class="input-medium bfh-states" data-country="US" data-state="CA"></select>

Example for loading the list of states for a country and selecting a default state in JavaScript

<button onclick="$('#states1').bfhstates({country: 'US', state: 'CA'})" class="btn">Load States</button>
<select id="states1" class="input-medium"></select>

Example for loading the list of states using Bootstrap Form Helpers' Select Box

<div class="bfh-selectbox bfh-states" data-country="US" data-state="CA">
  <input type="hidden" value="">
  <a class="bfh-selectbox-toggle" role="button" data-toggle="bfh-selectbox" href="#">
    <span class="bfh-selectbox-option input-medium" data-option=""></span>
    <b class="caret"></b>
  </a>
  <div class="bfh-selectbox-options">
  <div role="listbox">
    <ul role="option">
    </ul>
    </div>
  </div>
</div>

Example for loading the list of states based on a country selector

<select id="countries_states1" class="input-medium bfh-countries" data-country="US"></select>
<select class="input-medium bfh-states" data-country="countries_states1"></select>

Example for loading the list of states based on a country select using Bootstrap Form Helpers' Select Box

<div id="countries_states2" class="bfh-selectbox bfh-countries" data-country="US">
  <input type="hidden" value="">
  <a class="bfh-selectbox-toggle" role="button" data-toggle="bfh-selectbox" href="#">
    <span class="bfh-selectbox-option input-medium" data-option=""></span>
    <b class="caret"></b>
  </a>
  <div class="bfh-selectbox-options">
  <div role="listbox">
    <ul role="option">
    </ul>
    </div>
  </div>
</div>
<div class="bfh-selectbox bfh-states" data-country="countries_states2">
  <input type="hidden" value="">
  <a class="bfh-selectbox-toggle" role="button" data-toggle="bfh-selectbox" href="#">
    <span class="bfh-selectbox-option input-medium" data-option=""></span>
    <b class="caret"></b>
  </a>
  <div class="bfh-selectbox-options">
  <div role="listbox">
    <ul role="option">
    </ul>
    </div>
  </div>
</div>

Example for displaying the state name from a state and country code

<span class="bfh-states" data-country="US" data-state="CA"></span>