This country selector was written to be easy to use and to have no dependencies.
In order to use the Country Selector you must first include the countries.js file. The countries.min.js file has been minified to make it as small as possible and should be used for production.
This can be done by placing the following script tag at the bottom of your HTML, just before the closing body tag.
// Load the country selector file.
<script src="countries.min.js"></script>
</body>
</html>Now that the file has been included you will be able to access the country selector methods by calling window.countrySelector. Before calling any methods you need to ensure that all content has loaded and that the select boxes you want to populate have been placed on screen.
You can ensure that this has happened by placing your function calls in a window.onload event listener
<script>
// Onload event is triggered once all content has been loaded.
window.onload = function () {
// Populate and link country and region select with the ID of 'countries'
countrySelector.countrySelect('countries');
};
</script>If you would like to see a working example please see the demo folder alongside this file. Once you have selected a demo you can run it by opening the index.html file.
If you would like a quick start guide, the demos should have enough information to get you started without reading all the documentation.
To create a simple select box containing all countries, create an empty select element with an ID and a place holder (The place holder will be used as the default option in the select box).
Once you have done that, simply call the countrySelector.countrySelect method passing in the ID of the select box.
<!-- Empty select with an ID and a placeholder -->
<select id="countries" placeholder="Please select a country"></select>
<script>
// Onload event is triggered once all content has been loaded.
window.onload = function () {
// Populate and link country and region select with the ID of 'countries'
countrySelector.countrySelect('countries');
};
</script>
// Load the country selector file.
<script src="countries.min.js"></script>**Please note that the countries.js (countries.min.js for production) file must have been included, and the element must be on screen at the time the method is called.
To create a country select box with a linked region select box you will need to create two empty select boxes with appropriate ID's and placeholders.
Once you have done this you can call the countrySelector.countrySelect method and pass through the ID of the country select box followed by the ID of the region select box.
<!-- Empty select with an ID and a placeholder -->
<select id="countries" placeholder="Please select a country"></select>
<select id="regions" placeholder="Please select a region"></select>
<script>
// Onload event is triggered once all content has been loaded.
window.onload = function () {
// Populate and link country and region select with the ID of 'countries'
countrySelector.countrySelect('countries', 'regions');
};
</script>
// Load the country selector file.
<script src="countries.min.js"></script>If you have access to Jquery UI in your application you can use the autocomplete function that it provides to create dropdowns that will try to auto complete for your users as they enter their country or region name.
To generate autocompleting drop downs you will need to create text inputs with appropriate ID's and placeholders then call the countrySelector.autoComplete method passing in the ID of the countries input followed by the ID of regions input.
*Please note that the ID needs to include the '#' symbol for jquery ID lookups at the begining. Eg: '#countries'.
<!-- Empty select with an ID and a placeholder -->
<input id="CountryAutoComplete" placeholder="Please select a country">
<input id="RegionAutoComplete" placeholder="Please select a region">
<script>
// Onload event is triggered once all content has been loaded.
window.onload = function () {
// Populate and link country and region select with the ID of 'countries'
countrySelector.autoComplete('#CountryAutoComplete');
};
</script>
// Load the country selector file.
<script src="countries.min.js"></script><!-- Empty input with an ID and a placeholder -->
<input id="CountryAutoComplete" placeholder="Please select a country">
<input id="RegionAutoComplete" placeholder="Please select a region">
<script>
// Onload event is triggered once all content has been loaded.
window.onload = function () {
// Populate and link country and region select with the ID of 'countries'
countrySelector.autoComplete('#CountryAutoComplete', '#RegionAutoComplete');
};
</script>
// Load the country selector file.
<script src="countries.min.js"></script>The country selector affers a set of utility functions for those looking to write their own implementation. For a full understanding please see the countries.js file where each method can be viewed and edited as needed.
Generates a country select box and if required a linked region select box.
**Paramaters **
- ID of the country select box "countries"
- ID of the region select box (optional) "regions"
Returns all the regions based on a given Country name. Please note that only countries that exist in the countries.js file will be matched.
paramaters
- Name of a country EG: "South Africa"
returns an array of country names
paramaters
- none
Returns a multi dimensional object of country names with nested regions.
paramaters
- none
Will extract the selected country from the named country select and populate the named region select box with regions for that country.
**Paramaters **
- ID of the region select box EG:"regions"
- ID of the country select box EG:"countries"
Will create auto completing text boxes based on the Jquery UI auto complete widget.
*Note IDs must be prefixed with the '#' symbol.
**Paramaters **
- ID of the country select box "#countries"
- ID of the region select box (optional) "#regions"
Data provided by http://www.geobytes.com