Populate States Based on Country Selection with Value

Question

I have the code below and I want the second select element to get populated based on the country selection. So if user selects United States, it will populate the first array like Aalaska will be text and AK will be value, Alabama will be text and AL will be value and so on...

<p>
    <select id="country" name ="country">
        <option value="select">Select country</option>
        <option value="US">United States</option>
        <option value="CA">Canada</option>
    </select>
</p>
<p>
    <select name ="state" id ="state">
        <option value="select">Select state/province</option>
    </select>
</p>
<script>
var us_states = {"AK":"Alaska", "AL":"Alabama", "AR":"Arkansas", "AS":"American Samoa", "AZ":"Arizona", "CA":"California", "CO":"Colorado", "CT":"Connecticut", "DC":"District of Columbia", "DE":"Delaware", "FL":"Florida", "FM":"Federated States of Micronesia", "GA":"Georgia", "GU":"Guam", "HI":"Hawaii", "IA":"Iowa", "ID":"Idaho", "IL":"Illinois", "IN":"Indiana", "KS":"Kansas", "KY":"Kentucky", "LA":"Louisiana", "MA":"Massachusetts", "MD":"Maryland", "ME":"Maine", "MH":"Marshall Islands", "MI":"Michigan", "MN":"Minnesota", "MO":"Missouri", "MP":"Northern Mariana Islands", "MS":"Mississippi", "MT":"Montana", "NC":"North Carolina", "ND":"North Dakota", "NE":"Nebraska", "NH":"New Hampshire", "NJ":"New Jersey", "NM":"New Mexico", "NV":"Nevada", "NY":"New York", "OH":"Ohio", "OK":"Oklahoma", "OR":"Oregon", "PA":"Pennsylvania", "PR":"Puerto Rico", "PW":"Palau", "RI":"Rhode Island", "SC":"South Carolina", "SD":"South Dakota", "TN":"Tennessee", "TX":"Texas", "UT":"Utah", "VA":"Virginia", "VI":"Virgin Islands", "VT":"Vermont", "WA":"Washington", "WI":"Wisconsin", "WV":"West Virginia", "WY":"Wyoming"};
var ca_states = {"AB":"Alberta", "BC":"British Columbia", "MB":"Manitoba", "NB":"New Brunswick", "NL":"Newfoundland", "NS":"Nova Scotia", "NT":"Northwest Territories", "NU":"Nunavut", "ON":"Ontario", "PE":"Prince Edward Island", "QC":"Quebec", "SK":"Saskatchewan", "YT":"Yukon"};
</script>

Mark · Accepted Answer · 2017-09-07T00:16:40.923

It will be easier if you have your lists in a single object. Then you can use the select option's value to pick the lists. Then just loop over and append:

var stateLists = {
     us_states: {"AK":"Alaska", "AL":"Alabama", "AR":"Arkansas", "AS":"American Samoa", "AZ":"Arizona", "CA":"California", "CO":"Colorado", "CT":"Connecticut", "DC":"District of Columbia", "DE":"Delaware", "FL":"Florida", "FM":"Federated States of Micronesia", "GA":"Georgia", "GU":"Guam", "HI":"Hawaii", "IA":"Iowa", "ID":"Idaho", "IL":"Illinois", "IN":"Indiana", "KS":"Kansas", "KY":"Kentucky", "LA":"Louisiana", "MA":"Massachusetts", "MD":"Maryland", "ME":"Maine", "MH":"Marshall Islands", "MI":"Michigan", "MN":"Minnesota", "MO":"Missouri", "MP":"Northern Mariana Islands", "MS":"Mississippi", "MT":"Montana", "NC":"North Carolina", "ND":"North Dakota", "NE":"Nebraska", "NH":"New Hampshire", "NJ":"New Jersey", "NM":"New Mexico", "NV":"Nevada", "NY":"New York", "OH":"Ohio", "OK":"Oklahoma", "OR":"Oregon", "PA":"Pennsylvania", "PR":"Puerto Rico", "PW":"Palau", "RI":"Rhode Island", "SC":"South Carolina", "SD":"South Dakota", "TN":"Tennessee", "TX":"Texas", "UT":"Utah", "VA":"Virginia", "VI":"Virgin Islands", "VT":"Vermont", "WA":"Washington", "WI":"Wisconsin", "WV":"West Virginia", "WY":"Wyoming"}
   , ca_states:  {"AB":"Alberta", "BC":"British Columbia", "MB":"Manitoba", "NB":"New Brunswick", "NL":"Newfoundland", "NS":"Nova Scotia", "NT":"Northwest Territories", "NU":"Nunavut", "ON":"Ontario", "PE":"Prince Edward Island", "QC":"Quebec", "SK":"Saskatchewan", "YT":"Yukon"}
}

var select = document.getElementById('state')

function setStates(el) {
  if (el.value) {
    select.options.length = 0
    var list = stateLists[el.value]
    for (key in list) {
      var opt = document.createElement('option');
      opt.value = key;
      opt.innerHTML = list[key];
      select.appendChild(opt);
    }
  }
}

<p>
  <select id="country" name="country" onchange=setStates(this)>
            <option value="">Select country</option>
            <option value="us_states">United States</option>
            <option value="ca_states">Canada</option>
        </select>
</p>
<p>
  <select name="state" id="state">
            <option value="select">Select state/province</option>
        </select>
</p>

Did you run the snippet? You switch countries with the first select. — Mark, Sep 07 '17 at 00:24

score 0 · Answer 2 · answered Sep 07 '17 at 00:32

hope this answer could help, though the method is a bit longer

var selectus = document.getElementById("us_state");
for(indexus in us_states) {
    selectus.options[selectus.options.length] = new 
Option(us_states[indexus], indexus);
}

var selectca = document.getElementById("ca_state");
for(indexca in ca_states) {
    selectca.options[selectca.options.length] = new 
Option(ca_states[indexca], indexca);
}

FIDDLE

Populate States Based on Country Selection with Value

2 Answers2