Skip to content

Instantly share code, notes, and snippets.

@mscalora
Created July 29, 2014 21:25
Show Gist options
  • Save mscalora/dcfb389da404b80ed714 to your computer and use it in GitHub Desktop.
Save mscalora/dcfb389da404b80ed714 to your computer and use it in GitHub Desktop.
State/Territory/Protectorate/Province/Prefecture
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<title>Test</title>
<style>
.disabled {
opacity: 0.5;
}
</style>
</head>
<body>
<h2>Test</h2>
<p>
State/Province/Prefecture is tracked for a few countries such as the US, Autralia, Japan, Mexico, Brazil
</p>
<form>
<div class="row">
<label for="state">State/Province</label>
<select name="state" id="state" data-something="zzzz">
<option value=""></option><option value="AU,ACT">Australian Capital Territory (AU)</option><option value="AU,NSW">New South Wales (AU)</option><option value="AU,NT">Northern Territory (AU)</option><option value="AU,QLD">Queensland (AU)</option><option value="AU,SA">South Australia (AU)</option><option value="AU,TAS">Tasmania (AU)</option><option value="AU,VIC">Victoria (AU)</option><option value="AU,WA">Western Australia (AU)</option><option value="BR,AC">Acre (BR)</option><option value="BR,AL">Alagoas (BR)</option><option value="BR,AP">Amapa (BR)</option><option value="BR,AM">Amazonas (BR)</option><option value="BR,BA">Bahia (BR)</option><option value="BR,CE">Ceara (BR)</option><option value="BR,DF">Distrito Federal (BR)</option><option value="BR,ES">Espirito Santo (BR)</option><option value="BR,GO">Goias (BR)</option><option value="BR,MA">Maranhao (BR)</option><option value="BR,MT">Mato Grosso (BR)</option><option value="BR,MS">Mato Grosso do Sul (BR)</option><option value="BR,MG">Minas Gerais (BR)</option><option value="BR,PA">Para (BR)</option><option value="BR,PB">Paraiba (BR)</option><option value="BR,PR">Parana (BR)</option><option value="BR,PE">Pernambuco (BR)</option><option value="BR,PI">Piaui (BR)</option><option value="BR,RN">Rio Grande do Norte (BR)</option><option value="BR,RS">Rio Grande do Sul (BR)</option><option value="BR,RJ">Rio de Janeiro (BR)</option><option value="BR,RO">Rondonia (BR)</option><option value="BR,RR">Roraima (BR)</option><option value="BR,SC">Santa Catarina (BR)</option><option value="BR,SP">Sao Paulo (BR)</option><option value="BR,SE">Sergipe (BR)</option><option value="BR,TO">Tocantins (BR)</option><option value="CA,AB">Alberta (CA)</option><option value="CA,BC">British Columbia (CA)</option><option value="CA,MB">Manitoba (CA)</option><option value="CA,NB">New Brunswick (CA)</option><option value="CA,NL">Newfoundland (CA)</option><option value="CA,NT">Northwest Territories (CA)</option><option value="CA,NS">Nova Scotia (CA)</option><option value="CA,NU">Nunavut (CA)</option><option value="CA,ON">Ontario (CA)</option><option value="CA,PE">Prince Edward Island (CA)</option><option value="CA,QC">Quebec (CA)</option><option value="CA,SK">Saskatchewan (CA)</option><option value="CA,YT">Yukon Territory (CA)</option><option value="JP,23">Aichi (JP)</option><option value="JP,05">Akita (JP)</option><option value="JP,02">Aomori (JP)</option><option value="JP,12">Chiba (JP)</option><option value="JP,38">Ehime (JP)</option><option value="JP,18">Fukui (JP)</option><option value="JP,40">Fukuoka (JP)</option><option value="JP,07">Fukushima (JP)</option><option value="JP,21">Gifu (JP)</option><option value="JP,10">Gunma (JP)</option><option value="JP,34">Hiroshima (JP)</option><option value="JP,01">Hokkaido (JP)</option><option value="JP,28">Hyogo (JP)</option><option value="JP,08">Ibaraki (JP)</option><option value="JP,17">Ishikawa (JP)</option><option value="JP,03">Iwate (JP)</option><option value="JP,37">Kagawa (JP)</option><option value="JP,46">Kagoshima (JP)</option><option value="JP,14">Kanagawa (JP)</option><option value="JP,39">Kouchi (JP)</option><option value="JP,43">Kumamoto (JP)</option><option value="JP,26">Kyoto (JP)</option><option value="JP,24">Mie (JP)</option><option value="JP,04">Miyagi (JP)</option><option value="JP,45">Miyazaki (JP)</option><option value="JP,20">Nagano (JP)</option><option value="JP,42">Nagasaki (JP)</option><option value="JP,29">Nara (JP)</option><option value="JP,15">Niigata (JP)</option><option value="JP,44">Oita (JP)</option><option value="JP,33">Okayama (JP)</option><option value="JP,47">Okinawa (JP)</option><option value="JP,27">Osaka (JP)</option><option value="JP,41">Saga (JP)</option><option value="JP,11">Saitama (JP)</option><option value="JP,25">Shiga (JP)</option><option value="JP,32">Shimane (JP)</option><option value="JP,22">Shizuoka (JP)</option><option value="JP,09">Tochigi (JP)</option><option value="JP,36">Tokushima (JP)</option><option value="JP,13">Tokyo (JP)</option><option value="JP,31">Tottori (JP)</option><option value="JP,16">Toyama (JP)</option><option value="JP,30">Wakayama (JP)</option><option value="JP,06">Yamagata (JP)</option><option value="JP,35">Yamaguchi (JP)</option><option value="JP,19">Yamanashi (JP)</option><option value="MX,001">Aguascalientes (MX)</option><option value="MX,002">Baja California (MX)</option><option value="MX,003">Baja California Sur (MX)</option><option value="MX,004">Campeche (MX)</option><option value="MX,007">Chiapas (MX)</option><option value="MX,008">Chihuahua (MX)</option><option value="MX,005">Coahuila (MX)</option><option value="MX,006">Colima (MX)</option><option value="MX,009">Distrito Federal (MX)</option><option value="MX,010">Durango (MX)</option><option value="MX,011">Guanajuato (MX)</option><option value="MX,012">Guerrero (MX)</option><option value="MX,013">Hidalgo (MX)</option><option value="MX,014">Jalisco (MX)</option><option value="MX,015">Mexico (MX)</option><option value="MX,016">Michoacan (MX)</option><option value="MX,017">Morelos (MX)</option><option value="MX,018">Nayarit (MX)</option><option value="MX,019">Nuevo Leon (MX)</option><option value="MX,020">Oaxaca (MX)</option><option value="MX,021">Puebla (MX)</option><option value="MX,022">Queretaro (MX)</option><option value="MX,023">Quintana Roo (MX)</option><option value="MX,024">San Luis Potosi (MX)</option><option value="MX,025">Sinaloa (MX)</option><option value="MX,026">Sonora (MX)</option><option value="MX,027">Tabasco (MX)</option><option value="MX,028">Tamaulipas (MX)</option><option value="MX,029">Tlaxcala (MX)</option><option value="MX,030">Veracruz (MX)</option><option value="MX,031">Yucatan (MX)</option><option value="MX,032">Zacatecas (MX)</option><option value="US,AL">Alabama (US)</option><option value="US,AK" selected="selected">Alaska (US)</option><option value="US,AS">American Samoa (US)</option><option value="US,AZ">Arizona (US)</option><option value="US,AR">Arkansas (US)</option><option value="US,AA">Armed Forces America (US)</option><option value="US,AE">Armed Forces Other Areas (US)</option><option value="US,AP">Armed Forces Pacific (US)</option><option value="US,CA">California (US)</option><option value="US,CO">Colorado (US)</option><option value="US,CT">Connecticut (US)</option><option value="US,DE">Delaware (US)</option><option value="US,DC">District of Columbia (US)</option><option value="US,FM">Federated States of Micronesia (US)</option><option value="US,FL">Florida (US)</option><option value="US,GA">Georgia (US)</option><option value="US,GU">Guam (US)</option><option value="US,HI">Hawaii (US)</option><option value="US,ID">Idaho (US)</option><option value="US,IL">Illinois (US)</option><option value="US,IN">Indiana (US)</option><option value="US,IA">Iowa (US)</option><option value="US,KS">Kansas (US)</option><option value="US,KY">Kentucky (US)</option><option value="US,LA">Louisiana (US)</option><option value="US,ME">Maine (US)</option><option value="US,MH">Marshall Islands (US)</option><option value="US,MD">Maryland (US)</option><option value="US,MA">Massachusetts (US)</option><option value="US,MI">Michigan (US)</option><option value="US,MN">Minnesota (US)</option><option value="US,MS">Mississippi (US)</option><option value="US,MO">Missouri (US)</option><option value="US,MT">Montana (US)</option><option value="US,NE">Nebraska (US)</option><option value="US,NV">Nevada (US)</option><option value="US,NH">New Hampshire (US)</option><option value="US,NJ">New Jersey (US)</option><option value="US,NM">New Mexico (US)</option><option value="US,NY">New York (US)</option><option value="US,NC">North Carolina (US)</option><option value="US,ND">North Dakota (US)</option><option value="US,MP">Northern Mariana Islands (US)</option><option value="US,OH">Ohio (US)</option><option value="US,OK">Oklahoma (US)</option><option value="US,OR">Oregon (US)</option><option value="US,PW">Palau (US)</option><option value="US,PA">Pennsylvania (US)</option><option value="US,PR">Puerto Rico (US)</option><option value="US,RI">Rhode Island (US)</option><option value="US,SC">South Carolina (US)</option><option value="US,SD">South Dakota (US)</option><option value="US,TN">Tennessee (US)</option><option value="US,TX">Texas (US)</option><option value="US,VI">U.S. Virgin Islands (US)</option><option value="US,UT">Utah (US)</option><option value="US,VT">Vermont (US)</option><option value="US,VA">Virginia (US)</option><option value="US,WA">Washington (US)</option><option value="US,WV">West Virginia (US)</option><option value="US,WI">Wisconsin (US)</option><option value="US,WY">Wyoming (US)</option>
</select> <span class="error" id="state_error"></span> <span id="info"></span>
</label>
</div>
<div class="row">
<label for="country">Country
<select name="country" id="country" class="state_select" data-sister="xxxxx">
<option value=""></option><option value="AF">Afghanistan</option><option value="AX">Aland Islands</option><option value="AL">Albania</option><option value="DZ">Algeria</option><option value="AS">American Samoa</option><option value="AD">Andorra</option><option value="AO">Angola</option><option value="AI">Anguilla</option><option value="AQ">Antarctica</option><option value="AG">Antigua and Barbuda</option><option value="AR">Argentina</option><option value="AM">Armenia</option><option value="AW">Aruba</option><option value="AC">Ascension Island</option><option value="AU">Australia</option><option value="AT">Austria</option><option value="AZ">Azerbaijan</option><option value="BS">Bahamas</option><option value="BH">Bahrain</option><option value="BD">Bangladesh</option><option value="BB">Barbados</option><option value="BY">Belarus</option><option value="BE">Belgium</option><option value="BZ">Belize</option><option value="BJ">Benin</option><option value="BM">Bermuda</option><option value="BT">Bhutan</option><option value="BO">Bolivia</option><option value="BA">Bosnia and Herzegovina</option><option value="BW">Botswana</option><option value="BV">Bouvet Island</option><option value="BR">Brazil</option><option value="IO">British Indian Ocean Territory</option><option value="BN">Brunei Darussalam</option><option value="BG">Bulgaria</option><option value="BF">Burkina Faso</option><option value="BI">Burundi</option><option value="KH">Cambodia</option><option value="CM">Cameroon</option><option value="CA">Canada</option><option value="CV">Cape Verde Islands</option><option value="KY">Cayman Islands</option><option value="CF">Central African Republic</option><option value="TD">Chad</option><option value="CL">Chile</option><option value="CN">China</option><option value="CX">Christmas Island</option><option value="CC">Cocos (Keeling) Islands</option><option value="CO">Colombia</option><option value="KM">Comoros</option><option value="CG">Congo</option><option value="CD">Congo, Democratic Republic of</option><option value="CK">Cook Islands</option><option value="CR">Costa Rica</option><option value="CI">Cote d'Ivoire</option><option value="HR">Croatia/Hrvatska</option><option value="CU">Cuba</option><option value="CY">Cyprus</option><option value="CZ">Czech Republic</option><option value="DK">Denmark</option><option value="DJ">Djibouti</option><option value="DM">Dominica</option><option value="DO">Dominican Republic</option><option value="EC">Ecuador</option><option value="EG">Egypt</option><option value="SV">El Salvador</option><option value="GQ">Equatorial Guinea</option><option value="ER">Eritrea</option><option value="EE">Estonia</option><option value="ET">Ethiopia</option><option value="FK">Falkland Islands</option><option value="FO">Faroe Islands</option><option value="FJ">Fiji</option><option value="FI">Finland</option><option value="FR">France</option><option value="GF">French Guiana</option><option value="PF">French Polynesia</option><option value="TF">French Southern Territories</option><option value="GA">Gabon</option><option value="GM">Gambia</option><option value="GE">Georgia</option><option value="DE">Germany</option><option value="GH">Ghana</option><option value="GI">Gibraltar</option><option value="GR">Greece</option><option value="GL">Greenland</option><option value="GD">Grenada</option><option value="GP">Guadeloupe</option><option value="GU">Guam</option><option value="GT">Guatemala</option><option value="GG">Guernsey</option><option value="GN">Guinea</option><option value="GW">Guinea-Bissau</option><option value="GY">Guyana</option><option value="HT">Haiti</option><option value="HM">Heard and McDonald Islands</option><option value="HN">Honduras</option><option value="HK">Hong Kong</option><option value="HU">Hungary</option><option value="IS">Iceland</option><option value="IN">India</option><option value="ID">Indonesia</option><option value="IR">Iran, Islamic Republic of</option><option value="IQ">Iraq</option><option value="IE">Ireland</option><option value="IM">Isle of Man</option><option value="IL">Israel</option><option value="IT">Italy</option><option value="JM">Jamaica</option><option value="JP">Japan</option><option value="JE">Jersey</option><option value="JO">Jordan</option><option value="KZ">Kazakhstan</option><option value="KE">Kenya</option><option value="KI">Kiribati</option><option value="KP">Korea, Democratic People's Republic of</option><option value="KR">Korea, Republic of</option><option value="KV">Kosovo</option><option value="KW">Kuwait</option><option value="KG">Kyrgyzstan</option><option value="LA">Lao People's Democratic Republic</option><option value="LV">Latvia</option><option value="LB">Lebanon</option><option value="LS">Lesotho</option><option value="LR">Liberia</option><option value="LY">Libya</option><option value="LI">Liechtenstein</option><option value="LT">Lithuania</option><option value="LU">Luxembourg</option><option value="MO">Macao</option><option value="MK">Macedonia, The Former Yugoslav Republic of</option><option value="MG">Madagascar</option><option value="MW">Malawi</option><option value="MY">Malaysia</option><option value="MV">Maldives</option><option value="ML">Mali</option><option value="MT">Malta</option><option value="MH">Marshall Islands</option><option value="MQ">Martinique</option><option value="MR">Mauritania</option><option value="MU">Mauritius</option><option value="YT">Mayotte Island</option><option value="FX">Metropolitan France</option><option value="MX">Mexico</option><option value="FM">Micronesia, Federated States of</option><option value="MD">Moldova, Republic of</option><option value="MC">Monaco</option><option value="MN">Mongolia</option><option value="ME">Montenegro</option><option value="MS">Montserrat</option><option value="MA">Morocco</option><option value="MZ">Mozambique</option><option value="MM">Myanmar</option><option value="NA">Namibia</option><option value="NR">Nauru</option><option value="NP">Nepal</option><option value="NL">Netherlands</option><option value="AN">Netherlands Antilles</option><option value="NC">New Caledonia</option><option value="NZ">New Zealand</option><option value="NI">Nicaragua</option><option value="NE">Niger</option><option value="NG">Nigeria</option><option value="NU">Niue</option><option value="NF">Norfolk Island</option><option value="MP">Northern Mariana Islands</option><option value="NO">Norway</option><option value="OM">Oman</option><option value="PK">Pakistan</option><option value="PW">Palau</option><option value="PS">Palestinian Territories</option><option value="PA">Panama</option><option value="PG">Papua New Guinea</option><option value="PY">Paraguay</option><option value="PE">Peru</option><option value="PH">Philippines</option><option value="PN">Pitcairn Island</option><option value="PL">Poland</option><option value="PT">Portugal</option><option value="PR">Puerto Rico</option><option value="QA">Qatar</option><option value="RE">Reunion Island</option><option value="RO">Romania</option><option value="RU">Russian Federation</option><option value="RW">Rwanda</option><option value="SH">Saint Helena</option><option value="KN">Saint Kitts and Nevis</option><option value="LC">Saint Lucia</option><option value="MF">Saint Martin (French Side)</option><option value="PM">Saint Pierre and Miquelon</option><option value="VC">Saint Vincent and the Grenadines</option><option value="WS">Samoa</option><option value="SM">San Marino</option><option value="ST">Sao Tome and Principe</option><option value="SA">Saudi Arabia</option><option value="SN">Senegal</option><option value="RS">Serbia</option><option value="SC">Seychelles</option><option value="SL">Sierra Leone</option><option value="SG">Singapore</option><option value="SK">Slovakia</option><option value="SI">Slovenia</option><option value="SB">Solomon Islands</option><option value="SO">Somalia</option><option value="ZA">South Africa</option><option value="GS">South Georgia and South Sandwich Islands</option><option value="SS">South Sudan</option><option value="ES">Spain</option><option value="LK">Sri Lanka</option><option value="SD">Sudan</option><option value="SR">Suriname</option><option value="SJ">Svalbard and Jan Mayen Islands</option><option value="SZ">Swaziland</option><option value="SE">Sweden</option><option value="CH">Switzerland</option><option value="SY">Syria Arab Republic</option><option value="TW">Taiwan</option><option value="TJ">Tajikistan</option><option value="TZ">Tanzania, United Republic of</option><option value="TH">Thailand</option><option value="TL">Timor-Leste</option><option value="TG">Togo</option><option value="TK">Tokelau</option><option value="TO">Tonga Islands</option><option value="TT">Trinidad and Tobago</option><option value="TN">Tunisia</option><option value="TR">Turkey</option><option value="TM">Turkmenistan</option><option value="TC">Turks and Caicos Islands</option><option value="TV">Tuvalu</option><option value="UG">Uganda</option><option value="UA">Ukraine</option><option value="AE">United Arab Emirates</option><option value="GB">United Kingdom</option><option value="US" selected="selected">United States</option><option value="UM">United States Minor Outlying Islands</option><option value="UY">Uruguay</option><option value="UZ">Uzbekistan</option><option value="VU">Vanuatu</option><option value="VA">Vatican City</option><option value="VE">Venezuela</option><option value="VN">Vietnam</option><option value="VG">Virgin Islands (British)</option><option value="VI">Virgin Islands (US)</option><option value="WF">Wallis and Futuna Islands</option><option value="EH">Western Sahara</option><option value="YE">Yemen</option><option value="ZM">Zambia</option><option value="ZW">Zimbabwe</option>
</select>
<span class="error" id="country_error"></span>
</label>
</div>
</form>
<script>
var state = $('#state');
var country = $('#country').on('change',function(){
var opts = state.data('opts') || state.data('opts',opts = $('option',state)).data('opts');
state.html(opts.filter('[value^='+country.val()+'],[value=""]'));
var count = $('option',state).length-1;
state.prop('disabled',!count).closest('.row').toggleClass('disabled',!count);
$('#info').text(count?count + " choices":"");
});
country.trigger('change');
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment