jQuery Plugin For Country Selecter with Flags - flagstrap

flagstrap is an useful jQuery plugin for displaying a nice looking country selector with flags via Bootstrap's select and button dropdowns components.

Basic Usage:

1. Load jQuery library and Twitter's Bootstrap CSS framework in the web page.

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

2. Load the jQuery flagstrap plugin's files in the web page.

<link href="css/flags.css" rel="stylesheet">
<script src="js/jquery.flagstrap.js"></script>

3. Create an empty container for the country selector and pass the options via Html5 data-* attribute.

<div id="demo"
     data-input-name="country"
     data-selected-country="US"
     data-button-size="btn-lg"
     data-button-type="btn-warning"
     data-scrollable="true"
     data-scrollable-height="250px"
</div>

4. Initialize the plugin.

$('#demo').flagStrap();

5. You can also pass the options in JavaScript during initialization. The full options:

// the `name` attribute for the actual `select` input
inputName: "country",

// The bootstrap 'class' for this dropdown
buttonSize: "btn-md",

// The bootstrap 'class' for this drop down
buttonType: "btn-default",

// The `margin` between `flag` and `text label`
labelMargin: "10px",

// Scrollable or full height drop down
scrollable: true,

// `max-height` for the scrollable drop down
scrollableHeight: "250px",

// Only show specific countries
countries: '{"US": "United States","CA": "Canada"}'>

Change log:

2018-03-23

• FIX: the 'value' variable wasn't updating correctly on the 'onSelect' function, here is one alternative to correct the error

2018-01-17

• hotfix in the choice of the first element

2015-07-23

• added "change" event trigger

---

This awesome jQuery plugin is developed by blazeworx. For more Advanced Usages, please check the demo page or visit the official website.