Как включить функцию изменения при срабатывании IE 11 - PullRequest
Новая
       9

Как включить функцию изменения при срабатывании IE 11

0 голосов
/ 17 марта 2020

У меня есть функция onChange, которая запускается во всех браузерах (Chrome, ff, Safari и др. c.), Но она не срабатывает в 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

1 Ответ

0 голосов
/ 17 марта 2020

Я пытался проверить ваш код в браузере 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:

enter image description here

Если проблема не устранена, попробуйте очистить кеш и снова попробовать протестировать этот код.

...