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
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
-
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?– TylerFeb 4, 2017 at 10:48
-
3
-
@TimMarshall If you still haven't fixed it, can I see some code with what you have attempted?– StarxMar 23, 2017 at 21:23
-
@GregTrevellick, Great. I am glad. Let me know once you finish your extension. I would like to see it.– StarxMar 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
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/
Have a look on the following links.
http://www.marghoobsuleman.com/countries-dropdown-flags http://vincentlamanna.com/BootstrapFormHelpers/country.html
-
1
-
1first link is a good library but it has a lot of bugs and it is not responsive– PipoJul 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
<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>
-
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.– blueFastAug 7, 2013 at 9:35