Ayuda con combo selectivo Ajax/javascript

Iniciado por Unsighted_6x, 15 Octubre 2016, 04:26 AM

0 Miembros y 1 Visitante están viendo este tema.

Unsighted_6x

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>