Press "Enter" to skip to content

A Quick jQuery-Based Country Picker With Flags | Country Select JS

Country Select JS is a jQuery plugin to select a country, based on the international phone input plugin. Adds a flag dropdown to any input, which lists all countries in English and the dominant national language next to their flags.

Features

  • Automatically select country by user type.
  • Go to the country dropdown by typing the country name or using the up/down keys.
  • Selecting a country from the drop-down list will update the country name in the input.
  • A dropdown appears above or below the input based on the available space/scroll position.
  • Lots of customizable configuration options, as well as general methods of interaction.
  • Optionally, a field related to the two-character ISO country code in the selection can be updated.

country dropdown with flags example, country drop down list with flag html, country select dropdown html with flag, bs country picker, select country with flag

How to make use of it:

1. Load the jQuery country-select plugin files into 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.

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

4. Attach the plugin to the input field.

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

5. Set the default country in init.

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

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

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

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

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

8. Select a group of favorite countries. These countries will be placed at the top of the static dropdown list.

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

9. Set the width of the drop-down list to be the same as the input.

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

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

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

11. Change and set the country.

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

12. Destroy the plugin.

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

Easy Country Picker With Flags, Country Select JS Plugin/Github


See Demo And Download

Official Website(mrmarkfrench): Click Here

This superior jQuery/javascript plugin is developed by mrmarkfrench. For extra advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.