jQuery stateselector is a plugin that is given the state/province <select> field and dynamically populates it dependent on the country <select> field the plugin is attached to. Currently is using country codes, can be modified to take in string values of the countries on lines 97 and 104. To add more countries add a hash variable above $.fn.stat…

jquery.stateselector.js

/**
*	
*	Created by: Daniel Flynn
*	Date: Jan 17, 2013
*	Updated: Jan 17, 2013
*	jQuery plugin for a dynamic country/state select field
*
**/
(function($){

	// List of United States and their abbreviations
	var us_states = {
		'Alabama'		:	'AL',
		'Alaska'		:	'AK',
		'American Samoa':	'AS',
		'Arizona'		:	'AZ',
		'Arkansas'		:	'AR',
		'Armed Forces Europe' : 'AE',
		'Armed Forces Americas' : 'AA',
		'Armed Forces Pacific' : 'AP',
		'California'	:	'CA',
		'Colorado'		:	'CO',
		'Connecticut'	:	'CT',
		'District Of Columbia' : 'DC',
		'Delaware'		:	'DE',
		'Florida'		:	'FL',
		'Georgia'		:	'GA',
		'Guam'			:   'GU',
		'Hawaii'		:	'HI',
		'Idaho'			:	'ID',
		'Illinois'		:	'IL',
		'Indiana'		:	'IN',
		'Iowa'			:	'IA',
		'Kansas'		:	'KS',
		'Kentucky'		:	'KY',
		'Louisiana'		:	'LA',
		'Maine'			:	'ME',
		'Marshall Islands': 'MH',
		'Maryland'		:	'MD',
		'Massachusetts'	:	'MA',
		'Michigan'		:	'MI',
		'Micronesia'	:   'FM',
		'Minnesota'		:	'MN',
		'Mississippi'	:	'MS',
		'Missouri'		:	'MO',
		'Montana'		:	'MT',
		'Nebraska'		:	'NE',
		'Nevada'		:	'NV',
		'New Hampshire'	:	'NH',
		'New Jersey'	:	'NJ',
		'New Mexico'	:	'NM',
		'New York'		:	'NY',
		'North Carolina':	'NC',
		'North Dakota'	:	'ND',
		'Northern Mariana Islands': 'MP',
		'Ohio'			:	'OH',
		'Oklahoma'		:	'OK',
		'Oregon'		:	'OR',
		'Palau'			:   'PW',
		'Pennsylvania'	:	'PA',
		'Puerto Rico'	:   'PR',
		'Rhode Island'	:	'RI',
		'South Carolina':	'SC',
		'South Dakota'	:	'SD',
		'Tennessee'		:	'TN',
		'Texas'			:	'TX',
		'Utah'			:	'UT',
		'Vermont'		:	'VT',
		'Virginia'		:	'VA',
		'Virgin Islands':   'VI',
		'Washington'	:	'WA',
		'West Virginia'	:	'WV',
		'Wisconsin'		:	'WI',
		'Wyoming'		:	'WY'
	};

	// List of Canadian Provinces and their abbreviations
	var canada_provinces = {
		'Alberta'					:	'AB',			
		'British Columbia'			:	'BC',			
		'Manitoba'					:	'MB',			
		'New Brunswick'				:	'NB',			
		'Newfoundland and Labrador'	:	'NL',			
		'Northwest Territories'		:	'NT',			
		'Nova Scotia'				:	'NS',			
		'Nunavut'					:	'NU',			
		'Ontario'					:	'ON',			
		'Prince Edward Island'		:	'PE',			
		'Quebec'					:	'QC',			
		'Saskatchewan'				:	'SK',			
		'Yukon'						:	'YT'

	};

	/**
	*	Function called on 'this' (the jQuery selector .stateselector() was appended onto)
	*	Currently using country codes for the switch case, can be updated to use strings
	*	params:
	*		state_input_selector = the id or class of the <select> holding the states/provinces
	**/
	$.fn.stateselector = function(state_input_selector){
		// Get the country and state field
		var $country_input = $(this);
		var $state_input = $(state_input_selector);
		$country_input.change(function(){
			// Remove all states in the state dropdown
			$state_input.children().remove();
			switch($country_input.val()){
				// US country code
				case "1":
					// Add the states in the dropdown
					$.each(us_states, function(state, abbreviation){
						$state_input.append('<option value="'+ abbreviation +'">'+ state +'</option>');
					});
				break;
				// Canada country code
				case "3":
					// Add the provinces in the dropdown
					$.each(canada_provinces, function(province, abbreviation){
						$state_input.append('<option value="'+ abbreviation +'">'+ province +'</option>');
					});
				break;
				default:
					// If there are no countries selected, output to console as error 
					console.error('No valid country selected');
				break;
			}
		});
	};

})(jQuery);

Can you please provide an example of how this is used. How to attach it to a Select input?