javascript - 选择不同的下拉菜单后填写下拉菜单

Question

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

假设我有一个州/省的下拉菜单。根据选择的值，它将填写国家/地区下拉列表为美国/加拿大。

<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 jsonText = '{"USA":{ '
        + '"Alabama": "Alabama",'
        + '"Alaska": "Alaska",'
        + '},'
        + '"CAN":{'
        + '"Alberta": "Alberta",'
        + '}}';
    var json = JSON.parse(jsonText);

然后根据选择的国家/地区对其进行过滤，但是有没有一种简单的方法可以进行相反的操作？

我能想到的唯一方法是检查值以查看它是否:

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

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

Answer 1

您可以创建一个从州/省映射到国家/地区的对象:

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

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

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