Hola comunidad como están? tengo un problema trabajando en mi página con un combo que debería cargar información de otro archivo en el segundo select, estoy utilizando ajax para lograr que al elegir una provincia se cargue una localidad, dejo el código para quienes puedan ayudar, desde ya muchas gracias !
código HTML
</head>
<body>
<header>
<nav>
<a href="index.html">x</a>
<a href="index2.html" class="active">x</a>
</nav>
</header>
<section>
<h1>Selectores dinámicos</h1>
<select name="provincia">
<option value="0">Elija provincia</option>
<option value="1">Buenos Aires</option>
<option value="2">Cordoba</option>
<option value="3">Santa Fe</option>
</select>
<select name="localidad">
</select>
</section>
<script src="laboratorio2.js"></script>
</body>
</html>
código script
//variables globales
var pedido; //va a guardar el XHR
//vinculo a eventos
provincia.addEventListener('change', cargarLocalidades);
//funciones
function cargarLocalidades(){
var idProvincia = provincia.value; //obtengo el valor del select provincia
var url = 'ajax/localidad/'+idProvincia;
pedido = new XMLHttpRequest(); //creo el XHR
//me suscribo al evento load con la funcion ajaxResponse
pedido.addEventListener('load', ajaxResponse);
//me suscribo al evento error con la funcion ajaxError
pedido.addEventListener('load', ajaxError);
//abro una conexión GET utilizando la url
pedido.open('GET', url);
//envio el pedido
pedido.send();
limpiarLocalidades();
}
// "limpio" el select de localidades
function limpiarLocalidades(){
localidad.innerHTML = '<option>---</option>';
}
function dibujarLocalidades(optionsHTML){
localidad.innerHTML = optionsHTML;
}
function ajaxResponse(){
//valido que no haya errores de servidor
var serverOk = pedido.status < 400;
if(!serverOk){
ajaxError();
} else {
var respuesta = pedido.ResponseText;//obtengo la respuesta de ajax
console.log(respuesta);
dibujarLocalidades(respuesta); //llamar a la funcion dibujarLocalidades con el HTML obtenido
}
}
function ajaxError(){
console.warn('ajax error');
}
archivo que consultaría el ajax
<option value="1">Ciudad Autónoma de Buenos Aires</option>
<option value="2">Banfield</option>
<option value="3">Ciudad Evita</option>
<option value="4">Devoto</option>
<option value="5">Espeleta</option>
<option value="6">Munrock</option>
<option value="7">Vicente López</option>
Mostrar Temas
