Javascript 选择其他下拉列表后填写下拉列表

我试图想出一种方法，根据在不同下拉列表中选择的值自动填充下拉列表

假设我有一个州/省的下拉列表。根据选择的值，它将在国家/地区下拉列表中填写为USA/CAN

<select name="formState" class="form-control modeldropdown" id="state" required>
    <option value="">State / Province</option>
    <option value="">--- United States  ---</option>
    <option value="AL">Alabama - AL</option>
    ...
    <option value="MH">Marshall Islands - MH</option>
    <option value="">--- Canada ---</option>
    <option value="AB">Alberta - AB</option>
    <option value="BC">British Columbia - BC</option>
    ...
</select>

然后根据选择的国家对其进行过滤，但有没有一种简单的方法可以进行反向过滤

我能想到的唯一方法是检查该值是否为：

var state = $('#state').val();

if ( state == 'Alabama' || state == 'Alaska'...)
...

---

您可以制作一个从州/省映射到国家的对象：

const countryOfState = {
  'Alabama' : 'USA',
  'Alberta' : 'CAN'
};

let state = $('#state').val();

if (countryOfState[state] === 'USA') {
...

---

您可以使用

indexOf

检查数组中是否存在这样的元素：

const states = {
  'USA': ['Alabama'],
  'CAN': ['Alberta']
};

function getCountry(state) {
  for (let country in states) {
    if (states[country].indexOf(state) >= 0) {
      return country;
    }
  }

  return null;
}

console.log(getCountry('Alberta')); //CAN

---

这里有一个稍微横向使用

optgroup

的方法，我认为它对您的数据更有效。我还利用了

$（'#state'）。更改（函数（）{
var optGroup=$（this.options[this.selectedIndex]）。最近（'optGroup'）；
var label=$（optGroup.prop（'label'）；
var cCode=$（optGroup）.data（'countrycode'）；
$（'#country'）.html（''+标签+''）；
})

州/省
阿拉巴马州
马绍尔群岛-MH
阿尔伯塔省
不列颠哥伦比亚省-公元前
请选择State

我曾考虑过这个问题，但后来对json中所有重复使用的代码都不太满意（即：USA使用了50次），我发布了一个替代解决方案，可以避免重复国家

const states = {
  'USA': ['Alabama'],
  'CAN': ['Alberta']
};

function getCountry(state) {
  for (let country in states) {
    if (states[country].indexOf(state) >= 0) {
      return country;
    }
  }

  return null;
}

console.log(getCountry('Alberta')); //CAN