Search code examples
javascriptjqueryhtmlinternet-exploreronchange

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

I have an onChange function that fires in all browsers (Chrome, ff, Safari, etc.), but it doesn't fire in IE. I have read that IE doesn't support the onChange event and to use a click event instead, but I am not sure how to achieve the same results the onChange event to a click event

The onChange is on a select that populates the options of another select field based on whether a user selects Canada or USA...

Here is my code:

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>

I am not getting any console errors in IE

Solution

  • I tried to test your code with IE 11 browser and it worked fine on my side.

    The code is also working with 2 /select tags. you can remove it.

    Tested code:

    <!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>

    Output in IE 11 browser:

    enter image description here

    If the issue persists then try to clear the cache and again try to test this code.