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


 


Tema destacado: Guía rápida para descarga de herramientas gratuitas de seguridad y desinfección.


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  [Pregunta]: Options no se desplazan correctamente
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: 1 [2] Ir Abajo Respuesta Imprimir
Autor Tema: [Pregunta]: Options no se desplazan correctamente  (Leído 1,185 veces)
MiguelCanellas


Desconectado Desconectado

Mensajes: 583



Ver Perfil
Re: [Pregunta]: Options no se desplazan correctamente
« Respuesta #10 en: 30 Noviembre 2018, 18:27 »

Creo que ahí esta..

https://jsfiddle.net/o69dcx12/

si te fijas ahí aparece el select de como se vería, y esta deformado porque no aparecen las opciones a no ser que hagas scroll dentro del select
si al final no entendes lo que pasa o por qué del error comenta este tema diciendo que no sabes, así no  sigo esperando una respuesta  ;)


« Última modificación: 30 Noviembre 2018, 19:12 por MiguelCanellas » En línea

#!drvy
Moderador
***
Desconectado Desconectado

Mensajes: 5.525



Ver Perfil WWW
Re: [Pregunta]: Options no se desplazan correctamente
« Respuesta #11 en: 30 Noviembre 2018, 19:43 »

La verdad es que no he entendido muy bien cual es el problema... pero... te estas complicando demasiado. Por lo que veo de código que has expuesto, estas usando un select con literalmente miles de municipios. Eso es una carga muy pesada tanto para el servidor como para el navegador del cliente y muy poco práctico para futuras actualizaciones.

Yo te sugeriría que empieces a leer sobre lazy loading y peticiones AJAX. Te va a facilitar la vida y te ayudará a desarrollar aplicaciones fácilmente actualizables. El ejemplo que te muestro a continuación es muy básico con arrays en PHP, lo ideal seria utilizar base de datos pero bueno...

Codigo HTML
Código
  1. <select id='selectCuidades' data-tipo='cuidades'>
  2.    <option disabled selected>Seleccionar</option>
  3.  
  4. <select id='selectLocalidades' data-tipo='localidades'>
  5.    <option disabled selected>Seleccionar</option>
  6.  
  7. <script src='localidades.js'></script>

Codigo JS (localidades.js)
Código
  1. // Es mejor esperar a que este cargado todo el DOM.
  2. document.addEventListener('DOMContentLoaded', function(e){
  3.  
  4.    // Cargar la primera vez. En este caso cargaria las cuidades con indice
  5.    // 0 en $cuidades del PHP.
  6.    cargarOpciones('cuidades', 0, function(opciones){
  7.        pintarOpciones('selectCuidades', opciones);
  8.    });
  9.  
  10.    // Cuando el select "selectCuidades" cambie, obtendra la cuidad selecionada
  11.    // su valor y realizara una consulta para obtener las localidades pertinentes
  12.    // a esa cuidad.
  13.    document.getElementById('selectCuidades').addEventListener('change', function(e){
  14.        var index = this.options[this.selectedIndex].value; // valor del elemento seleccionado
  15.        cargarOpciones('localidades', index, function(opciones){
  16.            pintarOpciones('selectLocalidades', opciones);
  17.        });
  18.    });
  19.  
  20. });
  21.  
  22.  
  23. /**
  24.  * Hace un AJAX a un archivo PHP que le da las opciones para cada cuidad.
  25.  * Si le retorna un error, avisa de ello mediante alert.
  26.  *
  27.  * @param {string} tipo
  28.  * @param {integer} valor
  29.  * @param {function||object} callback
  30.  */
  31. var cargarOpciones = (function(tipo, valor, callback){
  32.    var url = 'localidades.php?tipo='+tipo+'&index='+valor;
  33.    var request = new XMLHttpRequest();
  34.    request.open('GET', url, true);
  35.    request.onload = function() {
  36.      if (request.status >= 200 && request.status < 400) {
  37.        var data = JSON.parse(request.responseText);
  38.  
  39.        if(data.error) {
  40.            alert('No existen datos');
  41.            return false;
  42.        }
  43.  
  44.        callback(data);
  45.      }
  46.    };
  47.    request.send();
  48. });
  49.  
  50.  
  51. /**
  52.  * Pinta los elementos que ha obtenido dentro de un select con el id indicado.
  53.  *
  54.  * @param {integer} idElemento
  55.  * @param {array} opciones
  56.  */
  57. var pintarOpciones = (function(idElemento, opciones){
  58.    var elemento = document.getElementById(idElemento);
  59.    elemento.innerHTML = '';
  60.  
  61.    opciones.forEach(function(valor, index){
  62.        var opcion = document.createElement('option');
  63.        opcion.value = index;
  64.        opcion.innerText = valor;
  65.        elemento.appendChild(opcion);
  66.    });
  67. });


Codigo PHP (localidades.php)
Código
  1. <?php
  2. $cuidades = array(
  3.    0 => array(
  4.        0 => 'Adolfo Alsina',
  5.        1 => 'Adolfo González Chavez',
  6.        2 => 'Alberti',
  7.    )
  8. );
  9.  
  10. $localidades = array(
  11.    0 => array( // El 0 representa el 0 de $cuidades (Adolfo Alsina)
  12.        0 => 'Carhué',
  13.        1 => 'Rivera',
  14.        2 => 'Villa Maza',
  15.        3 => 'San Miguel Arcángel',
  16.        4 => 'Esteban Agustín Gascón',
  17.        5 => 'Delfín Huergo',
  18.        6 => 'La Pala',
  19.        7 => 'Thames',
  20.        8 => 'Yutuyaco',
  21.    ),
  22.    1 => array( // Lo mismo, representa el 1 de 1 de $cuidades (adolfo Gonzalez)
  23.        0 => 'Gonzáles Chaves',
  24.        1 => 'De la Garma',
  25.        2 => 'Juan Eulogio Barra',
  26.        3 => 'Vásquez',
  27.    ),
  28.    2 => array( // etc...
  29.        0 => 'Alberti',
  30.        1 => 'Mechita',
  31.        2 => 'Villa Ortiz',
  32.        3 => 'Plá',
  33.        4 => 'Coronel Seguí',
  34.        5 => 'Villa Grisolía',
  35.        6 => 'Villa María',
  36.        7 => 'Gobernador Ugarte',
  37.    ),
  38. );
  39.  
  40. $tipo = $_GET['tipo']; // cuidades o localidades
  41. $valor = (int) $_GET['index']; // esperamos un valor solo numerico
  42. $resultado = array('error' => 'no encontrado'); // si no encuentra nada...
  43.  
  44. switch($tipo) {
  45.    case 'cuidades':
  46.        if (isset($cuidades[$valor])) {
  47.            $resultado = $cuidades[$valor];
  48.        }
  49.        break;
  50.  
  51.    case 'localidades':
  52.        if (isset($localidades[$valor])) {
  53.            $resultado = $localidades[$valor];
  54.        }
  55.        break;
  56. }
  57. die(json_encode($resultado)); // imprimimos un JSON
  58. ?>

Esto incluso se puede simplificar aún más haciendo que PHP imprima los option en vez de crearlos con JS pero es mejor que los cree el propio navegador.

https://es.wikipedia.org/wiki/Lazy_loading
https://www.w3schools.com/xml/ajax_intro.asp
https://es.wikipedia.org/wiki/JSON

Saludos


En línea

MiguelCanellas


Desconectado Desconectado

Mensajes: 583



Ver Perfil
Re: [Pregunta]: Options no se desplazan correctamente
« Respuesta #12 en: 30 Noviembre 2018, 22:00 »

Gracias amigo! voy a probar a ver que tal..
En línea

Páginas: 1 [2] Ir Arriba Respuesta Imprimir 

Ir a:  

Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines