У меня есть сайт, который запрашивает местоположение пользователя (город и штат).Чтобы добиться этого, у меня есть два раскрывающихся списка:
- Первый «штат» загружает в него все штаты США в качестве параметров при загрузке веб-сайта из файла 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 (IE11 в Windows 10), оба раскрывающихся списка просто отображаются как пустые.Другими словами, они кажутся незаселёнными.
Что может помешать работе раскрывающихся списков в 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;
}
});