Easy Country Picker With Flags - jQuery country-select

An easy-to-use jQuery country picker/selector plugin allows the user to quickly search and select a country from a responsive, mobile-friendly flag dropdown.

More features:

• Allows you to specify the pre-selected country.
• Allows you to exclude/include specific countries.
• Allows you to specify preferred countries.
• Retina-ready flag icons.
• Automatically changes the flag icon when you type in the input field.
• Keyboard interactions.
• Based on the International Telephone Input plugin.

How to use it:

1. Load the jQuery country-select plugin's files in your jQuery project.

<link rel="stylesheet" href="/path/to/countrySelect.css">
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/countrySelect.js"></script>

2. Create a normal input field for the country picker.

<input id="country_selector" type="text">

3. Create a hidden input to store the selected country code (ISO 3166-1 alpha-2).

<input id="country_selector" type="text">

4. Attach the plugin to the input field and done.

$("#country_selector").countrySelect();

5. Set the default country on init.

$("#country_selector").countrySelect({
  defaultCountry: "us"
});

6. Set the the position of the selected flag: inside (default) or outside.

$("#country_selector").countrySelect({
  defaultStyling: "inside"
});

7. Sometimes you might need to exclude/include countries.

$("#country_selector").countrySelect({
  excludeCountries: ['ch', 'do'],
  onlyCountries: ['us', 'gb', 'ca']
});

8. Specify an array of preferred countries. These countries will be placed at the top of the flat dropdown.

$("#country_selector").countrySelect({
  preferredCountries: ['us', 'gb', 'ch', 'ca', 'do'],
  // localized country names e.g. { 'de': 'Deutschland' }
  localizedCountries: null,
});

9. Set the dropdown's width to be the same as the input. This option will be automatically enabled on mobile devices.

$("#country_selector").countrySelect({
  responsiveDropdown: true
});

10. Get the selected country. This will return an object containing country name & code.

const myData = $("#country_selector").countrySelect("getSelectedCountryData");
const myData = $.fn.countrySelect.getCountryData();

11. Change & set the country.

$("#country_selector").countrySelect("selectCountry", "gb");
$("#country_selector").countrySelect("setCountry", "United States");

12. Destroy the plugin.

$("#country_selector").countrySelect("destroy");

Changelog:

v2.1.1 (2022-08-22)

• Add placeholder for default country value.

v2.1.0 (2021-09-23)

• Basic i18 support to mirror intl-tel-input's support.

---

This awesome jQuery plugin is developed by mrmarkfrench. For more Advanced Usages, please check the demo page or visit the official website.