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

Question

我有一个在所有浏览器（Chrome、ff、Safari 等）中触发的 onChange 函数，但它不会在 IE 中触发。我读过 IE 不支持 onChange 事件，而是使用点击事件，但我不确定如何实现 onChange 事件与点击事件相同的结果

onChange 位于 select 上，它根据用户 select 是加拿大还是美国...select 填充另一个 select 字段的选项...

这是我的代码：

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 中没有收到任何控制台错误

Answer 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 浏览器中的输出：

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

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

How to get an on change function to fire in IE 11

html

javascript

jquery

internet-explorer

onchange