This commit is contained in:
Ben Keen 2014-03-22 22:31:26 -07:00
parent a566a556f8
commit ffd1332a8f
4 changed files with 29 additions and 14 deletions

View File

@ -1,36 +1,36 @@
## country-region-dropdowns ## country-region-dropdowns
A common thing you often see in forms is a country dropdown which populates a second region field when a country is A common thing you often see in forms is a country dropdown which changes the contents of a second region field
selected. It's super easy to do this, but requires a lot of leg work tracking down the data and rigging it all up when a country is selected. It's super easy to do this, but requires a lot of leg work tracking down the data and
in your form. So this script does exactly that - and gives you a few options to cover the most likely scenarios you rigging it all up in your form. This script let's you set that all up automatically without having to run any custom
may need to handle. javascript.
The script comes in two versions: The script comes in two flavours:
- standalone script (no dependencies, just plain JS) - **10KB** - standalone script (no dependencies, just plain JS) - **10KB**
- a jQuery-dependent version (slightly smaller) - **8KB** - a jQuery-dependent version (slightly smaller) - **8KB**
### Features ### Features
- Lets you define an optional "please select" field for each (with whatever language you want). - Lets you customize the default "Please select" field for each country/region with whatever language you want.
- Lets you specify a default value for each field. - Lets you specify a default value for each field.
- Lets you customize the appearance and value of the country field ("Canada" or "CA"). - Lets you customize the appearance and value of the country field ("Canada" or "CA") - they can be different, if desired
- Lets you have as many country-region fields as you need in your page. (e.g. 2 char code for saving to database; full name for displaying purposes).
- The standalone version has no dependencies on other any libs (jQuery etc). - Lets you have as many country-region-mapped fields as you need in your page.
- The standalone version has no dependencies on other any libs (jQuery etc) and you can include the JS file anywhere you want
(head/foot).
### Example ### Example
Here's an example page that shows a few different ways it can be used. Here's an example page that shows a few different ways it can be used.
- Example page
### How to Use ### How to Use
It's very easy. It's very easy.
1. Include the `country-region-selector.min.js' file in your webpage. 1. Include the `country-region-selector.min.js` file in your webpage.
2. Add two `<select>` fields in the appropriate locations in your form. 2. Add two `<select>` fields in the appropriate locations in your form.
3. Give the country field a class of `crs-country`. 3. Give the country field a class of `crs-country`.
4. Give the region field a class of `crs-country`. 4. Give the region field a class of `crs-country`.

15
gruntfile.js Normal file
View File

@ -0,0 +1,15 @@
module.exports = function(grunt) {
"use strict";
// load what we need
grunt.loadNpmTasks('grunt-template');
grunt.loadNpmTasks('grunt-contrib-uglify');
var config = {
};
grunt.initConfig(config);
grunt.registerTask('default', ['uglify']);
grunt.registerTask('generate', ['uglify']);
};

View File

@ -22,6 +22,7 @@
"url": "https://github.com/benkeen/country-region-dropdowns/issues" "url": "https://github.com/benkeen/country-region-dropdowns/issues"
}, },
"devDependencies": { "devDependencies": {
"grunt": "~0.4.4" "grunt": "~0.4.4",
"grunt-contrib-uglify": "^0.4.0"
} }
} }

View File

@ -336,7 +336,6 @@
} }
} }
// when the page has loaded, run our init function // when the page has loaded, run our init function
_contentLoaded(window, _init); _contentLoaded(window, _init);