Select2 drop-down for countries, with flags

Asked 7/8, 2013 at 9:15 Answered 14/10, 2015 at 10:38

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.

Iveyivie answered 7/8, 2013 at 9:15 Comment(0)

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>

        $("[name='country']").select2({
            placeholder: "Select a country",
            data: isoCountries
        });
    });
})(jQuery);

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

Demo 1
Demo 2 with flags based on official DOC of select2

Counterirritant answered 14/10, 2015 at 10:38 Comment(6)

The Select2; Examples - Templating shows the flag when you choose a country as the selected option in the non-drop-down view. I've copied what they've done, similar to your Demo 2 with flags however this does not show the flag upon chosing an option. How can I replicate this please? – Chu 4/2, 2017 at 10:48

Awesome solution - works for my Chrome page action extension – Tolentino 23/3, 2017 at 7:55

@TimMarshall If you still haven't fixed it, can I see some code with what you have attempted? – Counterirritant 23/3, 2017 at 21:23

@GregTrevellick, Great. I am glad. Let me know once you finish your extension. I would like to see it. – Counterirritant 23/3, 2017 at 21:24

@Starx, thank you for this solution, it helped me a lot. I know this answer is a bit old but I wanted to answer @Tim Marshall because I faced the same problem and the solution could help others. Firstly, you have to make sure to add the flag-icon CSS library (<link href="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/3.3.0/css/flag-icon.min.css" rel="stylesheet" /> in 2019). – Gloriane 22/8, 2019 at 20:40

Secondly, if you want to see the flags on both the dropdown options and the selected option, you just have to add 2 lines: templateSelection for dropdown and templateResult for selected option. So you will end up with this:

$("[name='country']").select2({ placeholder: "Select a country", templateSelection: formatCountry, templateResult: formatCountry, data: isoCountries });

– Gloriane 22/8, 2019 at 20:50

The way i did it:

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

<script>
    $("[name='cdCountry']").select2({
        placeholder: "Select a country",
        formatResult: function (country) {
            return $(
              "<span><i class=\"flag flag-" + country.id.toLowerCase() + "\"></i> " + country.text + "</span>"
            );;
        },
        data: yourDataSource
    });
</script>

and using the css library (css and a sprite) https://www.flag-sprites.com/

Official DOC

Idomeneus answered 8/10, 2015 at 11:55 Comment(0)

Have a look on the following links.

http://www.marghoobsuleman.com/countries-dropdown-flags http://vincentlamanna.com/BootstrapFormHelpers/country.html

Sadiron answered 7/8, 2013 at 9:25 Comment(3)

second link is dead =[ – Humid 30/7, 2014 at 14:24

first link is a good library but it has a lot of bugs and it is not responsive – Commensal 13/7, 2015 at 13:35

@VivienPipo yes it is not responsive but it is very helpful and for responsiveness you need to make them responsive like change the width of .dd class – Noreennorene 11/2, 2018 at 14:35

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

Fringe answered 7/8, 2013 at 9:26 Comment(1)

Thanks, but this is too raw. I still need to put together the images (jpgs, no way!), the list of countries, etc. I was looking for some javascript library where I can simply pass an array of countries (by ISO code, for example), and get a fully initialized Select2 drop-down, with flags. – Iveyivie 7/8, 2013 at 9:35

Recommended topics

Hot tags