10

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.

Community
  • 1
  • 1
blueFast
  • 41,341
  • 63
  • 198
  • 344

4 Answers4

18

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.

Eugen Konkov
  • 22,193
  • 17
  • 108
  • 158
Starx
  • 77,474
  • 47
  • 185
  • 261
  • The [Select2; Examples - Templating](https://select2.github.io/examples.html#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](http://jsfiddle.net/Starx/sgb4888k/2/) however this does not show the flag upon chosing an option. How can I replicate this please? – Tyler Feb 04 '17 at 10:48
  • 3
    Awesome solution - works for my Chrome page action extension – Greg Trevellick Mar 23 '17 at 07:55
  • @TimMarshall If you still haven't fixed it, can I see some code with what you have attempted? – Starx Mar 23 '17 at 21:23
  • @GregTrevellick, Great. I am glad. Let me know once you finish your extension. I would like to see it. – Starx Mar 23 '17 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 (`` in 2019). – Héloïse Chauvel Aug 22 '19 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 });` – Héloïse Chauvel Aug 22 '19 at 20:50
6

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

Eugen Konkov
  • 22,193
  • 17
  • 108
  • 158
Rafael Herscovici
  • 16,558
  • 19
  • 65
  • 93
2

Have a look on the following links.

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

Duleendra
  • 497
  • 1
  • 5
  • 21
1
<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>
achudars
  • 1,486
  • 15
  • 25
  • 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. – blueFast Aug 07 '13 at 09:35