如何在 IE 11 中触发更改功能答案

【问题标题】：How to get an on change function to fire in IE 11如何在 IE 11 中触发更改功能
【发布时间】：2020-06-28 00:03:30
【问题描述】：

我有一个在所有浏览器（Chrome、ff、Safari 等）中触发的 onChange 函数，但在 IE 中不会触发。我已经读过 IE 不支持 onChange 事件并改用 click 事件，但我不确定如何将 onChange 事件与 click 事件实现相同的结果

onChange 是基于用户选择加拿大还是美国来填充另一个选择字段的选项的选择...

这是我的代码：

var states = {
  '': 'State',
  'AK': 'Alaska',
  'AL': 'Alabama',
  'AR': 'Arkansas',
  'AS': 'American Samoa',
  'AZ': 'Arizona',
  'CA': 'California',
  'CO': 'Colorado',
  'CT': 'Connecticut',
  'DC': 'D.C.',
  'DE': 'Delaware',
  'FL': 'Florida',
  'FM': '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': 'Marianas',
  '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',
  'AA': 'Military Americas',
  'AE': 'Military Europe/ME/Canada',
  'AP': 'Military Pacific',
};

var provinces = {
  '': 'Province',
  'AB': 'Alberta',
  'MB': 'Manitoba',
  'BC': 'British Columbia',
  'NB': 'New Brunswick',
  'NL': 'Newfoundland and Labrador',
  'NS': 'Nova Scotia',
  'NT': 'Northwest Territories',
  'NU': 'Nunavut',
  'ON': 'Ontario',
  'PE': 'Prince Edward Island',
  'QC': 'Quebec',
  'SK': 'Saskatchewan',
  'YT': 'Yukon Territory',
};

$('#src__form__country_select').on('change', function() {
  var spselect = $('#src__form__spselect');
  var values = states;
  if (this.value == 'CA') {
    values = provinces;
  }

  spselect.empty();
  $.each(values, function(key, value) {
    spselect.append($('<option></option>')
      .attr('value', key).text(value));
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-row">
  <div class="col-lg-6 col-md-6 form-group">
    <select required class="form-control" id="src__form__country_select">
      <option value="">Country</option>
      <option value="CA">Canada</option>
      <option value="US">United States</option>
    </select>
    <div class="invalid-feedback">
      This field is required
    </div>
  </div>
</div>

<div class="form-row">
  <div class="col-lg-6 col-md-6 form-group">
    <select required class="form-control" id="src__form__spselect">
      <option selected="" value="">Province/State
      </option>
    </select>
    </select>
    <div class="invalid-feedback">
      This field is required
    </div>
  </div>
</div>

我在 IE 中没有收到任何控制台错误

【问题讨论】：

省份选择器中有两个</select>。
修正那个错字，看看能不能修正它。

标签： javascript jquery html internet-explorer onchange

【解决方案1】：

我尝试使用 IE 11 浏览器测试您的代码，它在我这边运行良好。

该代码还使用 2 个 /select 标记。你可以删除它。

测试代码：

<!doctype html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


</head>
<body>
<div class="form-row">
  <div class="col-lg-6 col-md-6 form-group">
    <select required class="form-control" id="src__form__country_select">
      <option value="">Country</option>
      <option value="CA">Canada</option>
      <option value="US">United States</option>
    </select>
    <div class="invalid-feedback">
      This field is required
    </div>
  </div>
</div>

<div class="form-row">
  <div class="col-lg-6 col-md-6 form-group">
    <select required class="form-control" id="src__form__spselect">
      <option selected="" value="">Province/State
      </option>
    </select>
   
    <div class="invalid-feedback">
      This field is required
    </div>
  </div>
</div>
<script>
var states = {
  '': 'State',
  'AK': 'Alaska',
  'AL': 'Alabama',
  'AR': 'Arkansas',
  'AS': 'American Samoa',
  'AZ': 'Arizona',
  'CA': 'California',
  'CO': 'Colorado',
  'CT': 'Connecticut',
  'DC': 'D.C.',
  'DE': 'Delaware',
  'FL': 'Florida',
  'FM': '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': 'Marianas',
  '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',
  'AA': 'Military Americas',
  'AE': 'Military Europe/ME/Canada',
  'AP': 'Military Pacific',
};

var provinces = {
  '': 'Province',
  'AB': 'Alberta',
  'MB': 'Manitoba',
  'BC': 'British Columbia',
  'NB': 'New Brunswick',
  'NL': 'Newfoundland and Labrador',
  'NS': 'Nova Scotia',
  'NT': 'Northwest Territories',
  'NU': 'Nunavut',
  'ON': 'Ontario',
  'PE': 'Prince Edward Island',
  'QC': 'Quebec',
  'SK': 'Saskatchewan',
  'YT': 'Yukon Territory',
};

$('#src__form__country_select').on('change', function() {

  var spselect = $('#src__form__spselect');
  var values = states;
  if (this.value == 'CA') {
    values = provinces;
  }

  spselect.empty();
  $.each(values, function(key, value) {
    spselect.append($('<option></option>')
      .attr('value', key).text(value));
  });
});
</script>
</body>
</html>

在 IE 11 浏览器中的输出：

如果问题仍然存在，请尝试清除缓存并再次尝试测试此代码。

【讨论】：