Build SVG Flags Country List Select HTML5 Dropdown Using CSS3 in Javascript

You are currently viewing Build SVG Flags Country List Select HTML5 Dropdown Using CSS3 in Javascript

Build SVG Flags Country List Select HTML5 Dropdown Using CSS3 in Javascript

<meta name="description" content="Atlas">
<meta name="author" content="Hubert Souchaud">
 
<link rel="copyright" type="text/html" title="Webpage copyright information" href="https://creativecommons.org/licenses/by/2.0/" />
 
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
 
<link rel='dns-prefetch' href='//fonts.googleapis.com' />
<link rel='dns-prefetch' href='//cdnjs.cloudflare.com' />
<link rel='dns-prefetch' href='//code.jquery.com' />
 
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Comfortaa|Source+Code+Pro:300,600|Fredoka+One" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" integrity="sha256-xJOZHfpxLR/uhh1BwYFS5fhmOAdIRQaiOul5F/b7v3s=" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/2.8.0/css/flag-icon.min.css" integrity="sha256-EQjZwW4ljrt9dsonbyX+si6kbxgkVde47Ty9FQehnUg=" crossorigin="anonymous" />
 
<div class="layout">
  <!-- forked http://jsfiddle.net/Starx/sgb4888k/2/ -->
  <select class="country-select" name="country"></select>
  <!-- TODO
  https://github.com/rinvex/country
  https://restcountries.eu/
  -->
</div>
<script src="https://code.jquery.com/jquery-3.2.0.min.js" integrity="sha256-JAW99MJVpJBGcbzEuXk4Az05s/XyDdBomFqNlM3ic+I=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js" integrity="sha256-+mWd/G69S4qtgPowSELIeVAv7+FuL871WXaolgXnrwQ=" crossorigin="anonymous"></script>
<style>
@mixin v-center() {
  display: flex;
  align-items: center;
  justify-content: center;
}
 
:root {
}
 
html {
  background-color: black;
  font-weight: lighter;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
 
*, *:before, *:after {
  box-sizing: border-box;
  transition: all 1s ease;
}
 
body {
  font-family: 'Comfortaa', cursive;
  color: white;
  width: 100%;
  min-height: 100%;
}
.layout {
  @include v-center;
  height: 100vh;
}
.select2-results__option {
  color: #555;
}
.flag-text {
  margin-left: 10px;
}
</style>
<script>
$(document).ready(function () {
  (function ($) {
    $(function () {
      var isoCountries = [
        {
          id: "AF",
          text: "Afghanistan"
        },
        {
          id: "AX",
          text: "Aland Islands"
        },
        {
          id: "AL",
          text: "Albania"
        },
        {
          id: "DZ",
          text: "Algeria"
        },
        {
          id: "AS",
          text: "American Samoa"
        },
        {
          id: "AD",
          text: "Andorra"
        },
        {
          id: "AO",
          text: "Angola"
        },
        {
          id: "AI",
          text: "Anguilla"
        },
        {
          id: "AQ",
          text: "Antarctica"
        },
        {
          id: "AG",
          text: "Antigua And Barbuda"
        },
        {
          id: "AR",
          text: "Argentina"
        },
        {
          id: "AM",
          text: "Armenia"
        },
        {
          id: "AW",
          text: "Aruba"
        },
        {
          id: "AU",
          text: "Australia"
        },
        {
          id: "AT",
          text: "Austria"
        },
        {
          id: "AZ",
          text: "Azerbaijan"
        },
        {
          id: "BS",
          text: "Bahamas"
        },
        {
          id: "BH",
          text: "Bahrain"
        },
        {
          id: "BD",
          text: "Bangladesh"
        },
        {
          id: "BB",
          text: "Barbados"
        },
        {
          id: "BY",
          text: "Belarus"
        },
        {
          id: "BE",
          text: "Belgium"
        },
        {
          id: "BZ",
          text: "Belize"
        },
        {
          id: "BJ",
          text: "Benin"
        },
        {
          id: "BM",
          text: "Bermuda"
        },
        {
          id: "BT",
          text: "Bhutan"
        },
        {
          id: "BO",
          text: "Bolivia"
        },
        {
          id: "BA",
          text: "Bosnia And Herzegovina"
        },
        {
          id: "BW",
          text: "Botswana"
        },
        {
          id: "BV",
          text: "Bouvet Island"
        },
        {
          id: "BR",
          text: "Brazil"
        },
        {
          id: "IO",
          text: "British Indian Ocean Territory"
        },
        {
          id: "BN",
          text: "Brunei Darussalam"
        },
        {
          id: "BG",
          text: "Bulgaria"
        },
        {
          id: "BF",
          text: "Burkina Faso"
        },
        {
          id: "BI",
          text: "Burundi"
        },
        {
          id: "KH",
          text: "Cambodia"
        },
        {
          id: "CM",
          text: "Cameroon"
        },
        {
          id: "CA",
          text: "Canada"
        },
        {
          id: "CV",
          text: "Cape Verde"
        },
        {
          id: "KY",
          text: "Cayman Islands"
        },
        {
          id: "CF",
          text: "Central African Republic"
        },
        {
          id: "TD",
          text: "Chad"
        },
        {
          id: "CL",
          text: "Chile"
        },
        {
          id: "CN",
          text: "China"
        },
        {
          id: "CX",
          text: "Christmas Island"
        },
        {
          id: "CC",
          text: "Cocos (Keeling) Islands"
        },
        {
          id: "CO",
          text: "Colombia"
        },
        {
          id: "KM",
          text: "Comoros"
        },
        {
          id: "CG",
          text: "Congo"
        },
        {
          id: "CD",
          text: "Congo}, Democratic Republic"
        },
        {
          id: "CK",
          text: "Cook Islands"
        },
        {
          id: "CR",
          text: "Costa Rica"
        },
        {
          id: "CI",
          text: "Cote D'Ivoire"
        },
        {
          id: "HR",
          text: "Croatia"
        },
        {
          id: "CU",
          text: "Cuba"
        },
        {
          id: "CY",
          text: "Cyprus"
        },
        {
          id: "CZ",
          text: "Czech Republic"
        },
        {
          id: "DK",
          text: "Denmark"
        },
        {
          id: "DJ",
          text: "Djibouti"
        },
        {
          id: "DM",
          text: "Dominica"
        },
        {
          id: "DO",
          text: "Dominican Republic"
        },
        {
          id: "EC",
          text: "Ecuador"
        },
        {
          id: "EG",
          text: "Egypt"
        },
        {
          id: "SV",
          text: "El Salvador"
        },
        {
          id: "GQ",
          text: "Equatorial Guinea"
        },
        {
          id: "ER",
          text: "Eritrea"
        },
        {
          id: "EE",
          text: "Estonia"
        },
        {
          id: "ET",
          text: "Ethiopia"
        },
        {
          id: "FK",
          text: "Falkland Islands (Malvinas)"
        },
        {
          id: "FO",
          text: "Faroe Islands"
        },
        {
          id: "FJ",
          text: "Fiji"
        },
        {
          id: "FI",
          text: "Finland"
        },
        {
          id: "FR",
          text: "France"
        },
        {
          id: "GF",
          text: "French Guiana"
        },
        {
          id: "PF",
          text: "French Polynesia"
        },
        {
          id: "TF",
          text: "French Southern Territories"
        },
        {
          id: "GA",
          text: "Gabon"
        },
        {
          id: "GM",
          text: "Gambia"
        },
        {
          id: "GE",
          text: "Georgia"
        },
        {
          id: "DE",
          text: "Germany"
        },
        {
          id: "GH",
          text: "Ghana"
        },
        {
          id: "GI",
          text: "Gibraltar"
        },
        {
          id: "GR",
          text: "Greece"
        },
        {
          id: "GL",
          text: "Greenland"
        },
        {
          id: "GD",
          text: "Grenada"
        },
        {
          id: "GP",
          text: "Guadeloupe"
        },
        {
          id: "GU",
          text: "Guam"
        },
        {
          id: "GT",
          text: "Guatemala"
        },
        {
          id: "GG",
          text: "Guernsey"
        },
        {
          id: "GN",
          text: "Guinea"
        },
        {
          id: "GW",
          text: "Guinea-Bissau"
        },
        {
          id: "GY",
          text: "Guyana"
        },
        {
          id: "HT",
          text: "Haiti"
        },
        {
          id: "HM",
          text: "Heard Island & Mcdonald Islands"
        },
        {
          id: "VA",
          text: "Holy See (Vatican City State)"
        },
        {
          id: "HN",
          text: "Honduras"
        },
        {
          id: "HK",
          text: "Hong Kong"
        },
        {
          id: "HU",
          text: "Hungary"
        },
        {
          id: "IS",
          text: "Iceland"
        },
        {
          id: "IN",
          text: "India"
        },
        {
          id: "ID",
          text: "Indonesia"
        },
        {
          id: "IR",
          text: "Iran}, Islamic Republic Of"
        },
        {
          id: "IQ",
          text: "Iraq"
        },
        {
          id: "IE",
          text: "Ireland"
        },
        {
          id: "IM",
          text: "Isle Of Man"
        },
        {
          id: "IL",
          text: "Israel"
        },
        {
          id: "IT",
          text: "Italy"
        },
        {
          id: "JM",
          text: "Jamaica"
        },
        {
          id: "JP",
          text: "Japan"
        },
        {
          id: "JE",
          text: "Jersey"
        },
        {
          id: "JO",
          text: "Jordan"
        },
        {
          id: "KZ",
          text: "Kazakhstan"
        },
        {
          id: "KE",
          text: "Kenya"
        },
        {
          id: "KI",
          text: "Kiribati"
        },
        {
          id: "KR",
          text: "Korea"
        },
        {
          id: "KW",
          text: "Kuwait"
        },
        {
          id: "KG",
          text: "Kyrgyzstan"
        },
        {
          id: "LA",
          text: "Lao People's Democratic Republic"
        },
        {
          id: "LV",
          text: "Latvia"
        },
        {
          id: "LB",
          text: "Lebanon"
        },
        {
          id: "LS",
          text: "Lesotho"
        },
        {
          id: "LR",
          text: "Liberia"
        },
        {
          id: "LY",
          text: "Libyan Arab Jamahiriya"
        },
        {
          id: "LI",
          text: "Liechtenstein"
        },
        {
          id: "LT",
          text: "Lithuania"
        },
        {
          id: "LU",
          text: "Luxembourg"
        },
        {
          id: "MO",
          text: "Macao"
        },
        {
          id: "MK",
          text: "Macedonia"
        },
        {
          id: "MG",
          text: "Madagascar"
        },
        {
          id: "MW",
          text: "Malawi"
        },
        {
          id: "MY",
          text: "Malaysia"
        },
        {
          id: "MV",
          text: "Maldives"
        },
        {
          id: "ML",
          text: "Mali"
        },
        {
          id: "MT",
          text: "Malta"
        },
        {
          id: "MH",
          text: "Marshall Islands"
        },
        {
          id: "MQ",
          text: "Martinique"
        },
        {
          id: "MR",
          text: "Mauritania"
        },
        {
          id: "MU",
          text: "Mauritius"
        },
        {
          id: "YT",
          text: "Mayotte"
        },
        {
          id: "MX",
          text: "Mexico"
        },
        {
          id: "FM",
          text: "Micronesia}, Federated States Of"
        },
        {
          id: "MD",
          text: "Moldova"
        },
        {
          id: "MC",
          text: "Monaco"
        },
        {
          id: "MN",
          text: "Mongolia"
        },
        {
          id: "ME",
          text: "Montenegro"
        },
        {
          id: "MS",
          text: "Montserrat"
        },
        {
          id: "MA",
          text: "Morocco"
        },
        {
          id: "MZ",
          text: "Mozambique"
        },
        {
          id: "MM",
          text: "Myanmar"
        },
        {
          id: "NA",
          text: "Namibia"
        },
        {
          id: "NR",
          text: "Nauru"
        },
        {
          id: "NP",
          text: "Nepal"
        },
        {
          id: "NL",
          text: "Netherlands"
        },
        {
          id: "AN",
          text: "Netherlands Antilles"
        },
        {
          id: "NC",
          text: "New Caledonia"
        },
        {
          id: "NZ",
          text: "New Zealand"
        },
        {
          id: "NI",
          text: "Nicaragua"
        },
        {
          id: "NE",
          text: "Niger"
        },
        {
          id: "NG",
          text: "Nigeria"
        },
        {
          id: "NU",
          text: "Niue"
        },
        {
          id: "NF",
          text: "Norfolk Island"
        },
        {
          id: "MP",
          text: "Northern Mariana Islands"
        },
        {
          id: "NO",
          text: "Norway"
        },
        {
          id: "OM",
          text: "Oman"
        },
        {
          id: "PK",
          text: "Pakistan"
        },
        {
          id: "PW",
          text: "Palau"
        },
        {
          id: "PS",
          text: "Palestinian Territory}, Occupied"
        },
        {
          id: "PA",
          text: "Panama"
        },
        {
          id: "PG",
          text: "Papua New Guinea"
        },
        {
          id: "PY",
          text: "Paraguay"
        },
        {
          id: "PE",
          text: "Peru"
        },
        {
          id: "PH",
          text: "Philippines"
        },
        {
          id: "PN",
          text: "Pitcairn"
        },
        {
          id: "PL",
          text: "Poland"
        },
        {
          id: "PT",
          text: "Portugal"
        },
        {
          id: "PR",
          text: "Puerto Rico"
        },
        {
          id: "QA",
          text: "Qatar"
        },
        {
          id: "RE",
          text: "Reunion"
        },
        {
          id: "RO",
          text: "Romania"
        },
        {
          id: "RU",
          text: "Russian Federation"
        },
        {
          id: "RW",
          text: "Rwanda"
        },
        {
          id: "BL",
          text: "Saint Barthelemy"
        },
        {
          id: "SH",
          text: "Saint Helena"
        },
        {
          id: "KN",
          text: "Saint Kitts And Nevis"
        },
        {
          id: "LC",
          text: "Saint Lucia"
        },
        {
          id: "MF",
          text: "Saint Martin"
        },
        {
          id: "PM",
          text: "Saint Pierre And Miquelon"
        },
        {
          id: "VC",
          text: "Saint Vincent And Grenadines"
        },
        {
          id: "WS",
          text: "Samoa"
        },
        {
          id: "SM",
          text: "San Marino"
        },
        {
          id: "ST",
          text: "Sao Tome And Principe"
        },
        {
          id: "SA",
          text: "Saudi Arabia"
        },
        {
          id: "SN",
          text: "Senegal"
        },
        {
          id: "RS",
          text: "Serbia"
        },
        {
          id: "SC",
          text: "Seychelles"
        },
        {
          id: "SL",
          text: "Sierra Leone"
        },
        {
          id: "SG",
          text: "Singapore"
        },
        {
          id: "SK",
          text: "Slovakia"
        },
        {
          id: "SI",
          text: "Slovenia"
        },
        {
          id: "SB",
          text: "Solomon Islands"
        },
        {
          id: "SO",
          text: "Somalia"
        },
        {
          id: "ZA",
          text: "South Africa"
        },
        {
          id: "GS",
          text: "South Georgia And Sandwich Isl."
        },
        {
          id: "ES",
          text: "Spain"
        },
        {
          id: "LK",
          text: "Sri Lanka"
        },
        {
          id: "SD",
          text: "Sudan"
        },
        {
          id: "SR",
          text: "Suriname"
        },
        {
          id: "SJ",
          text: "Svalbard And Jan Mayen"
        },
        {
          id: "SZ",
          text: "Swaziland"
        },
        {
          id: "SE",
          text: "Sweden"
        },
        {
          id: "CH",
          text: "Switzerland"
        },
        {
          id: "SY",
          text: "Syrian Arab Republic"
        },
        {
          id: "TW",
          text: "Taiwan"
        },
        {
          id: "TJ",
          text: "Tajikistan"
        },
        {
          id: "TZ",
          text: "Tanzania"
        },
        {
          id: "TH",
          text: "Thailand"
        },
        {
          id: "TL",
          text: "Timor-Leste"
        },
        {
          id: "TG",
          text: "Togo"
        },
        {
          id: "TK",
          text: "Tokelau"
        },
        {
          id: "TO",
          text: "Tonga"
        },
        {
          id: "TT",
          text: "Trinidad And Tobago"
        },
        {
          id: "TN",
          text: "Tunisia"
        },
        {
          id: "TR",
          text: "Turkey"
        },
        {
          id: "TM",
          text: "Turkmenistan"
        },
        {
          id: "TC",
          text: "Turks And Caicos Islands"
        },
        {
          id: "TV",
          text: "Tuvalu"
        },
        {
          id: "UG",
          text: "Uganda"
        },
        {
          id: "UA",
          text: "Ukraine"
        },
        {
          id: "AE",
          text: "United Arab Emirates"
        },
        {
          id: "GB",
          text: "United Kingdom"
        },
        {
          id: "US",
          text: "United States"
        },
        {
          id: "UM",
          text: "United States Outlying Islands"
        },
        {
          id: "UY",
          text: "Uruguay"
        },
        {
          id: "UZ",
          text: "Uzbekistan"
        },
        {
          id: "VU",
          text: "Vanuatu"
        },
        {
          id: "VE",
          text: "Venezuela"
        },
        {
          id: "VN",
          text: "Viet Nam"
        },
        {
          id: "VG",
          text: "Virgin Islands}, British"
        },
        {
          id: "VI",
          text: "Virgin Islands}, U.S."
        },
        {
          id: "WF",
          text: "Wallis And Futuna"
        },
        {
          id: "EH",
          text: "Western Sahara"
        },
        {
          id: "YE",
          text: "Yemen"
        },
        {
          id: "ZM",
          text: "Zambia"
        },
        {
          id: "ZW",
          text: "Zimbabwe"
        }
      ];
 
      console.log(isoCountries.length);
 
      function formatCountry(country) {
        if (!country.id) {
          return country.text;
        }
        var $country = $(
          '<span class="flag-icon flag-icon-' +
            country.id.toLowerCase() +
            ' flag-icon-squared"></span>' +
            '<span class="flag-text">' +
            country.text +
            "</span>"
        );
        return $country;
      }
 
      //Assuming you have a select element with name country
      // e.g. <select name="name"></select>
 
      $("[name="country"]").select2({
        placeholder: "Select a country",
        templateResult: formatCountry,
        data: isoCountries
      });
    });
  })(jQuery);
});
</script>

Ranjith

Hi, I'm Manoj a full-time Blogger, YouTuber, Affiliate Marketer, & founder of Coding Diksha. Here, I post about programming to help developers.

Leave a Reply