为什么这个基于 Javascript 的下拉选择在 IE 中不起作用？答案

【问题标题】：Why doesn't this Javascript-based dropdown select work in IE?为什么这个基于 Javascript 的下拉选择在 IE 中不起作用？
【发布时间】：2018-09-18 16:12:50
【问题描述】：

我有一个网站询问用户的位置（城市和州）。为此，我有两个下拉菜单：

-第一个“州”在网站加载时将所有美国州作为选项从名为 usaStates.json 的文件中加载到其中。 - 第二个“城市”在您从第一个下拉列表中选择一个州之前不会显示选项。当您这样做时，选项会根据您选择的状态从名为 usaCities.json 的文件中加载到其中。（例如，如果您选择佛罗里达州，那么它会填充所有佛罗里达州城市作为选项。）

usaStates.json 看起来像：

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

等等……

usaCities.json 看起来像：

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

等等。

现在，此解决方案在 Chrome 和 Firefox 中运行良好。但是，当网站在 IE（Windows 10 上的 IE11）中加载时，两个下拉菜单都显示为空白。换句话说，它们似乎无人居住。

什么可能会阻止下拉框在 IE 上运行？有什么想法吗？谢谢。

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;
        }
    });

【问题讨论】：

你可以按F11在控制台中查看是否有错误。 IE 不支持 Fetch，但您可能正在使用 babel。如果没有我们真的无法知道的错误。
当脚本没有完成它应该做的事情时的第一步：启动控制台并查找错误 -> debugging - How can I debug my JavaScript code?

标签： javascript jquery html json internet-explorer