Я учусь создавать адаптивные страницы, используя API выборки, который затем предварительно загрузит следующий набор параметров базы данных в раскрывающийся список. Я использую Javascript-файл, который в моем html-файле будет называться скриптом, этот java-скрипт затем вызывает php-файл AJAX, который берет информацию из моей базы данных и возвращает мне JSON-файл. Я получил это, чтобы частично работать, но выпадающий список, который я пытаюсь предварительно загрузить, показывает только номер 0 для любого количества городов, которые генерируются, однако мне нужно, чтобы значения заполнялись соответствующим «id» и имя опции с «name»города, которые приходят из файла JSON.
Я создал этот код, чтобы он работал ...
// function takes in a specific ID of a province
function fetchProvincialCities(provinceId) {
var getRequestSent = 'provincial_cities_ajax.php?province_id=' + provinceId;
fetch(getRequestSent)
.then(function (response) {
return response.json() // this returns a JSON from the called php file
})
.then(function (retrieved) {
let cities = Object.keys(retrieved.cities);
// cities should will have "id" and "name" for each entree
// retrieved['success'] should return a true or a false
if (retrieved['success']) {
var citiesArray = [];
for (var i in cities) {
var a = cities[i];
citiesArray.push(a);
}
//passes a prepared array of 2 variables "id" and "name"
addCitiesToSelect(citiesArray);
}
});
}
Это еще одна функция, которая будет заполнять мой HTML
function addCitiesToSelect(cities) {
// resets the select box before being populated
let select = document.getElementById("city");
if(select != null){
for(var i = select.options.length - 1; i >=0; i--){
select.remove(i);
}
}
// populates the html page with retrieved data
select = document.getElementById("city");
for (var index in cities) {
select.options[select.options.length] = new Option(cities[index], index);
}
}
Любая помощь будет принята с благодарностью.