puedes hacerlo asi:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Municipios de Cádiz</title>
<script>
function getInfo(url,callback){
fetch(`${url}`)
.then(function(response) {
if(response.ok)
return response.json();
})
.then(function(data){
callback(data);
})
.catch(function(error) {
console.log('Hubo un problema con la petición Fetch:' + error.message);
});
}
window.onload = function() {
getInfo("data.php",function(comarcas){
let content="";
for(i in comarcas){
content +=`<option value="${comarcas[i].id}">${comarcas[i].nombre}</option>`;
}
document.getElementById("comarca").innerHTML=content;
});
}
function cleanDiv(selector){
document.getElementById(selector).innerHTML = "";
}
function municipios(comarcas){
cleanDiv("pedania");
cleanDiv("resultado");
url = `data.php?comarca=${comarcas}`;
getInfo(url,function(municipios){
let content= `Municipio: <select onchange="pedania(${comarcas},this.value)" id="municipio"><option> Seleccionar municipio </option>`;
for (let i in municipios) {
content += `<option value="${municipios[i].id}">${municipios[i].nombre}</option>`;
}
content += "</select>";
document.getElementById("municipios").innerHTML = content;
});
}
function pedania(comarcas,municipio){
cleanDiv("resultado");
url = `data.php?comarca=${comarcas}&municipio=${municipio}`;
getInfo(url,function(pedania){
let content= `pedania: <select onchange="showInfo(${comarcas},${municipio},this.value)" id="pedania"><option> Seleccionar municipio </option>`;
for (let i in pedania) {
content += `<option value="${pedania[i].id}">${pedania[i].nombre}</option>`;
}
content += "</select>";
document.getElementById("pedania").innerHTML = content;
});
}
function showInfo(comarcas,municipio,pedania){
url =`data.php?comarca=${comarcas}&municipio=${municipio}&pedania=${pedania}`;
getInfo(url,function(data){
let resultado =`<p>poblacion:${data[0].poblacion}</p>
<p>superficie:${data[0].superficie}</p>
<p>densidad poblacion:${data[0].densidad}</p>
<p>altitud: ${data[0].altitud}</p>
<p>gentilicio: ${data[0].gentilicio}</p>
<p>distancia: ${data[0].distancia}</p>
<p>pedanias: ${data[0].nombre}</p>`;
document.getElementById("resultado").innerHTML=resultado;
})
}
</script>
</head>
<body>
<h1>Provincia de Cádiz</h1>
Comarca
<select name="comarca" id="comarca" onchange="municipios(this.value)">
<option value="-1">Seleccionar comarca</option>
</select>
<div id="municipios"></div>
<div id="pedania"></div>
<div id="resultado"></div>
</body>
</html>
y una mejor forma de hacerlo es con un solo php para reutilizar codigo y hacer mas simple las urls:
<?php
$conexion = new mysqli("localhost", "root", "", "cadiz");
$conexion->query("set names utf8");
if(isset($_GET['comarca']) && isset($_GET['municipio']) && isset($_GET['pedania'])){
$comarca = filter_var($_GET['comarca'], FILTER_VALIDATE_INT);
$municipio = filter_var($_GET['municipio'], FILTER_VALIDATE_INT);
$pedania= filter_var($_GET['pedania'], FILTER_VALIDATE_INT);
$sql ="select pedania.nombre, municipio.poblacion, municipio.superficie, municipio.densidad, municipio.altitud, municipio.distancia, municipio.gentilicio from municipio INNER join pedania on municipio.id = pedania.municipio_id where comarca_id =${comarca} and municipio.id =${municipio} and pedania.id =${pedania}";
}elseif (isset($_GET['comarca']) && isset($_GET['municipio'])){
$comarca = filter_var($_GET['comarca'], FILTER_VALIDATE_INT);
$municipio = filter_var($_GET['municipio'], FILTER_VALIDATE_INT);
$sql = "select pedania.id, pedania.nombre, municipio.poblacion, municipio.superficie, municipio.densidad, municipio.altitud, municipio.distancia, municipio.gentilicio from municipio INNER join pedania on municipio.id = pedania.municipio_id where comarca_id =${comarca} and municipio.id =${municipio}";
}
elseif (isset($_GET['comarca'])) {
$comarca = filter_var($_GET['comarca'], FILTER_VALIDATE_INT);
$sql = "select * from municipio where comarca_id = $comarca order by nombre";
}
else{
$sql = "select * from comarca order by nombre";
}
$resultado = $conexion->query($sql);
if($resultado->num_rows > 0){
echo json_encode($resultado->fetch_all(MYSQLI_ASSOC));
}else{
echo json_encode(array("error" => "sorry no data"));
}
?>
XMLHttpRequest
puedes hacer lo mismo con fetch – Bryro el 6 dic. 19 a las 14:01