Question

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

让我们说州/省下降了。根据选择的值，将填写国家/地区下拉列表为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 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') {
...

Answer 2

您可以使用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

Answer 3

这里是一个使用optgroup的略微侧面的方法，我认为无论如何我的数据效果更好。我还使用了data attributes

＆＃13;

$('#state').change(function() {
  var optGroup = $(this.options[this.selectedIndex]).closest('optgroup');
  var label = $(optGroup).prop('label');
  var cCode = $(optGroup).data('countrycode');
  $('#country').html('<option value="'+ cCode  + '">' + label + '</option>');
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select name="formState" class="form-control modeldropdown" id="state" required>
    <option value="">State / Province</option>
    <optgroup label="United States" data-countryCode="USA">
       <option value="AL">Alabama - AL</option>
       <!-- ... -->
       <option value="MH">Marshall Islands - MH</option>
    </optgroup>
    <optgroup label="Canada" data-countryCode="CA">
       <option value="AB">Alberta - AB</option>
       <option value="BC">British Columbia - BC</option>
    </optgroup>
</select>
<select id="country" name="country"><option disabled selected>Please Select State</option></select>

＆＃13;

选择不同的下拉列表后填写下拉列表

3 个答案: