根据国家/地区选择填充状态值

Question

我有下面的代码，我希望根据国家/地区选择填充第二个选择元素。因此，如果用户选择美国，它将填充第一个数组，例如阿拉斯加将是文本，AK 将是值，阿拉巴马州将是文本，AL 将是值等等......

<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>

Answer 1

如果您将列表放在单个对象中会更容易。然后您可以使用选择选项的值来选择列表。然后循环并追加：

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>