Question

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

-第一个“州”从一个名为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;
        }
    });

Answer 1

IE不支持

fetch-请参见https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API#Browser_compatibility或https://caniuse.com/#feat=fetch

为什么此基于Javascript的下拉选择在IE中不起作用？

1 个答案: