elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: AIO elhacker.NET 2021 Compilación herramientas análisis y desinfección malware


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  Ayuda con combo selectivo Ajax/javascript
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: Ayuda con combo selectivo Ajax/javascript  (Leído 1,723 veces)
Unsighted_6x

Desconectado Desconectado

Mensajes: 19


Ver Perfil
Ayuda con combo selectivo Ajax/javascript
« 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>


« Última modificación: 15 Octubre 2016, 04:31 am por Unsighted_6x » En línea

Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
[Duda] PHP, javascript o Ajax.
PHP
Dacan 4 2,976 Último mensaje 25 Febrero 2009, 00:47 am
por Dacan
Dudas Ajax y javascript
Desarrollo Web
ZharkD 1 2,610 Último mensaje 14 Julio 2010, 18:06 pm
por ZharkD
Refresco selectivo sin AJAX
Desarrollo Web
kerith 2 3,433 Último mensaje 31 Diciembre 2010, 12:52 pm
por kerith
HTML Combo + javascript
Desarrollo Web
extreme69 4 3,316 Último mensaje 25 Diciembre 2011, 05:26 am
por extreme69
[Ayuda] Menudo lio con AJAX entre javascript y PHP, paso de variables
PHP
Graphixx 0 2,583 Último mensaje 9 Abril 2012, 18:09 pm
por Graphixx
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines