About country picker

This jQuery plugin allows you to add a country picker to easily display a list of countries in your Bootstrap form. This country picker can be used along with our select jQuery plugin. There is also an option to display the country flags.

Examples

Example for loading the list of countries and selecting a default country

<select class="form-control bfh-countries" data-country="US"></select>

Example for loading the list of countries, limited to a specific list of countries

<select class="form-control bfh-countries" data-available="US,AG,AU"></select>

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



<button onclick="$('#countries1').bfhcountries({country: 'US'})" class="btn">Load Countries</button>
<br><br>
<select id="countries1" class="form-control"></select>

Example for loading the list of countries and flags using Bootstrap Form Helpers Select Box

<div class="bfh-selectbox bfh-countries" data-country="US" data-flags="true">
</div>

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

<span class="bfh-countries" data-country="US" data-flags="true"></span>

Available languages

  • English (US)
  • Arabic
  • German (DE)
  • Spanish (ES)
  • Italian (IT)
  • Portuguese (BR)
  • Simplified Chinese (CN)
  • Simplified Chinese (TW)

Options

Option Description
country Two letters country code. To select a country. Required when blank is set to false. Default: ''
available Comma separated list of two letters country code. To restrict the list of countries. Default: ''
flags Boolean. To show the country flags. Default: false
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.