About state picker

This jQuery plugin allows you to add a state picker to easily display a list of states in your Bootstrap form. This state picker can be used along with our select jQuery plugin as well as our country picker jQuery plugin.

Examples

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

<select class="form-control 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>
<br><br>
<select id="states1" class="form-control"></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">
</div>

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



<select id="countries_states1" class="form-control bfh-countries" data-country="US"></select>
<br><br>
<select class="form-control 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">
</div>
<br><br>
<div class="bfh-selectbox bfh-states" data-country="countries_states2">
</div>

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

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

Available languages

  • English (US)

Options

Option Description
country Two letters country code or ID of a bfh-countries HTML element. To filter based on a country. Required. Default: ''
state Two letters state code. To select a state. Required if blank is to false. Default: ''
blank Boolean. To show a blank option. Default: true

If using our select jQuery plugin, refer to this documentation for a list of additional options.

Methods

If using our select jQuery plugin, refer to this documentation for a list of methods.

Events

If using our select jQuery plugin, refer to this documentation for a list of events.