Why doesn't this Javascript-based dropdown select work in IE?

Question

I have a site that asks for the user's location (City AND State). To achieve this, I have two dropdowns:

-The first, "state", loads all the USA states into it as options upon the website's load, from a file called usaStates.json. -The second, "city", doesn't show options until you select a state from the first dropdown. When you do, options are loaded into it based on the state you chose, from a file called usaCities.json. (So for example if you choose Florida, then it is populated with all the Florida Cities as options.)

The usaStates.json looks like:

{
    "name": "Alabama",
    "abbreviation": "AL"
},
{
    "name": "Alaska",
    "abbreviation": "AK"
},

and so on...

The usaCities.json looks like:

{"city": "Alachua", "state": "Florida"},
{"city": "Altamonte Springs    ", "state": "Florida"},
{"city": "Anna Maria", "state": "Florida"},

and so on.

Now, this solution works perfectly fine in Chrome and Firefox. HOWEVER, when the site is loaded in IE (IE11 on Windows 10), both dropdowns just show up as blank. In other words, they appear unpopulated.

What might be preventing the dropdown boxes from working on IE? Any ideas, please? Thank you.

HTML:

<label>Your Location</label>
<select name="state" id="state_select"></select>


<select name="city" id="city_select"></select>

Javascript:

let stateDropdown = document.getElementById('state_select');
let cityDropdown = document.getElementById('city_select');

stateDropdown.length = 0;
cityDropdown.length = 0;

cityDropdown.hidden = true;

let defaultOption = document.createElement('option');
defaultOption.text = 'Choose State';

stateDropdown.add(defaultOption);
stateDropdown.selectedIndex = 0;

function propState() {
    fetch('js/usa/usaStates.json')
    .then(response => {
        try {
            response.json().then( data=> {
                let option;
                console.log(data);
                for(let i=0; i<data.length; i++) {
                    option = document.createElement('option');
                    option.text = data[i].name;
                    option.value = data[i].name;
                    stateDropdown.add(option);
                }
            })
        } catch(error) {
            console.log(error);
        }
    });
}

propState();

function propCity(e) {

    let defaultOption = document.createElement('option');
    defaultOption.text = 'Choose City';

    cityDropdown.add(defaultOption);
    cityDropdown.selectedIndex = 0;

    let state = e.target.value;
    console.log(state);

    if(state == 'Florida') {
        fetch('js/usa/usaCities.json')
        .then(response => {
            try {
                response.json().then( data=> {
                    let option;

                    for(let i=0; i<data.length; i++) {

                        if(data[i].state === state) {
                            option = document.createElement('option');
                            option.text = data[i].city;
                            option.value = data[i].city;
                            cityDropdown.add(option);
                        }
                    }
                })



            } catch(error) {
                console.log(error);
            }
        });        
    }
}


    stateDropdown.addEventListener('change', e => {
        cityDropdown.length = 0;
        propCity(e);
        if ( e.target.value == 'Florida') {
            cityDropdown.hidden = false;
        }
        if ( e.target.value != 'Florida') {
            cityDropdown.hidden = true;
        }
    });

you can press F11 and see in the console if there are any errors. Fetch is not supported in IE but you may be using babel. Without the error we really can't know. — HMR, Sep 18 '18 at 08:08
First step when a script doesn't do what it's supposed to: fire up the console and look for errors -> [debugging - How can I debug my JavaScript code?](https://stackoverflow.com/questions/988363/how-can-i-debug-my-javascript-code) — Andreas, Sep 18 '18 at 08:17

Robin Zigmond · Accepted Answer · 2018-09-18T08:12:50.767

1

fetch is not supported on IE - see https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API#Browser_compatibility or https://caniuse.com/#feat=fetch

edited Sep 18 '18 at 08:12

answered Sep 18 '18 at 08:07

Robin Zigmond

17,805
2
23
34

Why doesn't this Javascript-based dropdown select work in IE?

1 Answers1