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.
Starx
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
Dementic
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
<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>
来源：https://stackoverflow.com/questions/18099370/select2-drop-down-for-countries-with-flags