Select2 drop-down for countries, with flags

Does somebody have an easy to use example of a country drop-down, with country flags, for Select2? I am about to implement one based on this suggestion, but I would prefer to avoid reinventing the wheel.



I was working on a similar problem and here is how I solve it.

(function($) {
    $(function() {
        var isoCountries = [
            { id: 'AF', text: 'Afghanistan'},
        //Assuming you have a select element with name country
        // e.g. <select name="name"></select>

            placeholder: "Select a country",
            data: isoCountries

I also have made a gist about it and following are the demos.


The way i did it:

<div class="form-group">
    <label class="control-label">Destination</label>
    <input type="text" name="cdCountry" class="form-control" required />

        placeholder: "Select a country",
        formatResult: function (country) {
            return $(
              "<span><i class=\"flag flag-" + + "\"></i> " + country.text + "</span>"
        data: yourDataSource

and using the css library (css and a sprite)

Official DOC

    <link href="select2.css" rel="stylesheet"/>
    <script src="select2.js"></script>
        $(document).ready(function() { $("#e1").select2(); });
    <select id="e1">
        <option value="1">Albania<img src="Albania.jpg"></option>
        <option value="2">Germany<img src="Germany.jpg"></option>


Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.