Título: Ayuda con combo selectivo Ajax/javascript Publicado por: Unsighted_6x en 15 Octubre 2016, 04:26 am 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> |