Home > Software design >  Adding options in Dropdown dynamically
Adding options in Dropdown dynamically

Time:03-12

I am trying to include countries' name with their flags in the dropdown. I am using select2 library. The code below shows names in the dropdown but its width is too low to see anything, seems I am doing very silly mistake and missing something.

$(document).ready(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'
    }
  ];

  function formatCountry(country) {
    if (!country.id) {
      return country.text;
    }
    var $country = $(
      '<span ></span>'  
      '<span >'   country.text   "</span>"
    );
    return $country;
  };


  $("[name='country']").select2({
    placeholder: "Select a country",
    templateResult: formatCountry,
    data: isoCountries
  });

});
.flag-text {
  margin-left: 10px;
}
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" />
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/feather-icons/4.28.0/feather.min.js"></script>
<link href='https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/0.8.2/css/flag-icon.min.css' rel='stylesheet' />

<select name="country">
</select>

CodePudding user response:

You can add the following two properties to select2()

dropdownAutoWidth: true,
width: 'auto'

$(document).ready(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'
    }
  ];

  function formatCountry(country) {
    if (!country.id) {
      return country.text;
    }
    var $country = $(
      '<span ></span>'  
      '<span >'   country.text   "</span>"
    );
    return $country;
  };


  $("[name='country']").select2({
    placeholder: "Select a country",
    templateResult: formatCountry,
    data: isoCountries,
    dropdownAutoWidth: true,
    width: 'auto'
  });

});
.flag-text {
  margin-left: 10px;
}
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" />
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/feather-icons/4.28.0/feather.min.js"></script>
<link href='https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/0.8.2/css/flag-icon.min.css' rel='stylesheet' />

<select name="country">
</select>

CodePudding user response:

You just have to give the select tag a width:

$(document).ready(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'
    }
  ];

  function formatCountry(country) {
    if (!country.id) {
      return country.text;
    }
    var $country = $(
      '<span ></span>'  
      '<span >'   country.text   "</span>"
    );
    return $country;
  };


  $("[name='country']").select2({
    placeholder: "Select a country",
    templateResult: formatCountry,
    data: isoCountries
  });

});
.flag-text {
  margin-left: 10px;
}
.country{
  width:300px;
  }
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" />
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/feather-icons/4.28.0/feather.min.js"></script>
<link href='https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/0.8.2/css/flag-icon.min.css' rel='stylesheet' />

<select name="country" >
</select>

  • Related