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.

4 Answers 4

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.

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?
    – Tyler
    Feb 4, 2017 at 10:48
  • 3
    Awesome solution - works for my Chrome page action extension Mar 23, 2017 at 7:55
  • @TimMarshall If you still haven't fixed it, can I see some code with what you have attempted?
    – Starx
    Mar 23, 2017 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, 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). Aug 22, 2019 at 20:40
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

2

Have a look on the following links.

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

3
  • 1
    second link is dead =[ Jul 30, 2014 at 14:24
  • 1
    first link is a good library but it has a lot of bugs and it is not responsive
    – Pipo
    Jul 13, 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 Feb 11, 2018 at 14:35
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>
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.
    – blueFast
    Aug 7, 2013 at 9:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.