Foro de elhacker.net

Programación => Desarrollo Web => Mensaje iniciado por: Leguim en 28 Noviembre 2018, 20:39 pm



Título: [Pregunta]: Options no se desplazan correctamente
Publicado por: Leguim en 28 Noviembre 2018, 20:39 pm
Es muy raro la verdad ya que algunos options de un select no se desplazan normalmente. Y es muy raro todavía que los que no se desplazan son el option 1000 para arriba, en total son 1165 options..

no puedo mandar captura porque cada vez que quiero hacerlo se me cierra el select.. la cosa es que para que se pueda seleccionar del 1000 para arriba hay que hacer como un scroll en el select (el input) pero no se desplazan como debería.


Título: Re: [Pregunta]: Options no se desplazan correctamente
Publicado por: Drakaris en 29 Noviembre 2018, 17:53 pm
?

¿Cual es tu problema?Y donde esta el codigo? Para que te pogamos ayudar tendrias que especificar más, y te recomiendo, que pongas el codigo para que veamos con detalle donde esta el fallo


Título: Re: [Pregunta]: Options no se desplazan correctamente
Publicado por: Leguim en 29 Noviembre 2018, 20:39 pm
?

¿Cual es tu problema?Y donde esta el codigo? Para que te pogamos ayudar tendrias que especificar más, y te recomiendo, que pongas el codigo para que veamos con detalle donde esta el fallo

El sistema es así, vos tenes 2 selects uno para seleccionar el municipio y otro para seleccionar tu ciudad de residencia.

en el primer select, al seleccionar un municipio se van a poder ver las ciudades de dicho municipio en el segundo select. Entonces a medida que el usuario va cambiando de municipio desaparecen ciudades y reaparecen otras del municipio que se selecciono.

El sistema funciona correctamente hasta que se llega hasta el option 1000 de ciudades.

SELECT PARA SELECCIONAR TU MUNICIPIO:

Código
  1. <select class="input_registro_C select_registro_municipio" onchange="Change_Municipio(this.value)">
  2.   <?php
  3.      Options_Municipios();
  4.   ?>
  5. </select>
  6.  

En la funcion de php de Options_Municipios() no hay mucho que mostrar simplemente tienen los options que son algo así... <option value="1">Nombre del municipio</option>
No los muestro porque son 173 y se les va a ser pesadisimo ver tantas lineas pero ya revise cada una y ninguna esta incorrecta. (estoy seguro que el error no pasa por ahí)


SELECT PARA SELECCIONAR CIUDADES
Código
  1. <select class="input_registro_C select_registro_ciudad" height="50px">
  2. <?php
  3.        Options_Ciudades();
  4.   ?>
  5. </select>
  6.  

Lo mismo son todos los options de las ciudades que tiene el sistema <option value="1">Nombre de la ciudad</option>

simplemente al cambiar o seleccionar un option determinado del select de municipios se van a ocultar o motrar determinadas ciudades

Con esta función se OCULTAN TODAS LAS CIUDADES QUE TENGA EL SISTEMA
Código
  1. function Ocultar_Ciudades()
  2. {
  3.  var select_ciudad = document.querySelectorAll(".select_registro_ciudad");
  4.  var option_pc = select_ciudad[0].getElementsByTagName("option");
  5.  var option_movil = select_ciudad[1].getElementsByTagName("option");
  6.  var cant_option_pc = option_pc.length;
  7.  var cant_option_movil = option_movil.length;
  8.  
  9.  option_pc[0].selected = true;
  10.  option_movil[0].selected = true;
  11.  for(var i = 1; i < cant_option_pc && i < cant_option_movil; i++)
  12.  {
  13.    option_pc[i].style.display = "none";
  14.    option_movil[i].style.display = "none";
  15.  }
  16. }
  17.  

AL CARGAR LA PAGINA VA A EJECUTARSE LO SIGUIENTE

Código
  1. // FORMULARIO UBICACIÓN
  2. window.addEventListener('load', Reiniciar_Options_Ubicacion,false);
  3.  
  4. function Reiniciar_Options_Ubicacion()
  5. {
  6.  Ocultar_Ciudades();
  7. }
  8.  

AL HACER CLICK EN UN DETERMINADO OPTION DE SELECT MUNICIPIOS PASARA ESTO..

Código
  1. function Change_Municipio(value)
  2. {
  3.  if(value == 0)
  4.  {
  5.    Ocultar_Ciudades(); // Oculta todas las ciudades
  6.  }
  7.  else if(value == 1)
  8.  {
  9.    Ocultar_Ciudades(); // Oculta todas las ciudades
  10.    Mostrar_Ciudades_M1(); // Muestra las ciudades del Municipio 1 (Adolfo Alsina)
  11.  }
  12.  else if(value == 2)
  13.  {
  14.    Ocultar_Ciudades(); // Oculta todas las ciudades
  15.    Mostrar_Ciudades_M2(); // Muestra las ciudades del Municipio 2 (Adolfo Gonzales Chavez)
  16.  }
  17. else if(value== X) // VA A PASAR ESTO HASTA EL 135 ya que son 135 municipios los cuales tienen varias ciudades, dando un total de unas 1170 ciudades aproximadamente
  18. {
  19.  
  20. }
  21.  

EL PROBLEMA SEGURAMENTE ESTE POR ACÁ:

Código
  1. function Mostrar_Ciudades_M119() // Mostrar ciudades del Municipio 119 (San Pedro)
  2. {
  3.  var select_ciudad = document.querySelectorAll(".select_registro_ciudad");
  4.  var option_pc = select_ciudad[0].getElementsByTagName("option");
  5.  var option_movil = select_ciudad[1].getElementsByTagName("option");
  6.  
  7.  for(var i = 991; i < 1022; i++)
  8.  {
  9.    option_pc[i].style.display = "block";
  10.    option_movil[i].style.display = "block";
  11.  }
  12. }
  13.  
  14. function Mostrar_Ciudades_M120() // Mostrar ciudades del Municipio 120 (San Vicente)
  15. {
  16.  var select_ciudad = document.querySelectorAll(".select_registro_ciudad");
  17.  var option_pc = select_ciudad[0].getElementsByTagName("option");
  18.  var option_movil = select_ciudad[1].getElementsByTagName("option");
  19.  
  20.  for(var i = 1022; i < 1025; i++)
  21.  {
  22.    option_pc[i].style.display = "block";
  23.    option_movil[i].style.display = "block";
  24.  }
  25. }
  26.  

COMO PUEDEN VER.. EN LA SEGUNDA FUNCION YA ESTOY TRABAJANDO CON MAS DE 1000 OPTIONS EN UN SELECT PERO CUANDO TRATO DE HACER DISPLAY BLOCK.. SI SE MUESTRAN PERO CON EL ERROR QUE YA DIJE. QUE NO SE DESPLAZAN CORRECTAMENTE. SE DEFORMA DE ALGUNA MANERA EL SELECT.. ESTO SOLAMENTE CON ELEMENTOS QUE TENGAN option_pc[1001] o option_movil[1001] para moviles para arriba.

tambien pueden probar con este sencillo codigo que les dejo.. que pueden copiar y pegar en un nuevo archivo html si quieren para poder ver el error..

https://pastebin.com/T5xCE0yJ


Título: Re: [Pregunta]: Options no se desplazan correctamente
Publicado por: z3nth10n en 29 Noviembre 2018, 20:56 pm
Ala ala, ya podrías haber hecho más doble posts, hay una opción de editar. :xD


Título: Re: [Pregunta]: Options no se desplazan correctamente
Publicado por: Leguim en 29 Noviembre 2018, 21:00 pm
Ala ala, ya podrías haber hecho más doble posts, hay una opción de editar. :xD

No tiene sentido editar si el foro/sistema no me permite poner todos los caracteres del programa. es por eso que hice "doble post". Para que se pueda ver todo el código.


Título: Re: [Pregunta]: Options no se desplazan correctamente
Publicado por: z3nth10n en 29 Noviembre 2018, 21:07 pm
Amigo en ese caso, usa: https://pastebin.com/

Así se verá más limpio el mensaje que quieras postear. Usa varios pastebins si lo necesitas.

Un saludo. :P


Título: Re: [Pregunta]: Options no se desplazan correctamente
Publicado por: Leguim en 29 Noviembre 2018, 21:13 pm
https://pastebin.com/T5xCE0yJ


Título: Re: [Pregunta]: Options no se desplazan correctamente
Publicado por: z3nth10n en 29 Noviembre 2018, 21:56 pm
Pero muchacho, edita el trochimoche de arriba, y dile a algun mod que te edite dos doble posts. Si no, andamos en las mismas.

Así es imposible responderte bien.

Solo faltaría que llegase alguien y te citase la respuesta :xD (10 veces por lo menos)


Título: Re: [Pregunta]: Options no se desplazan correctamente
Publicado por: Leguim en 29 Noviembre 2018, 22:00 pm
Pero muchacho, edita el trochimoche de arriba, y dile a algun mod que te edite dos doble posts. Si no, andamos en las mismas.

Así es imposible responderte bien.

Solo faltaría que llegase alguien y te citase la respuesta :xD (10 veces por lo menos)

Ya esta, pero me encantaría que me dieras una respuesta relevante al tema.


Título: Re: [Pregunta]: Options no se desplazan correctamente
Publicado por: z3nth10n en 30 Noviembre 2018, 14:28 pm
Te puedo ayudar, pero realmente, se me hace muy espeso el tema (ya que no tengo como probar por mi cuenta lo que realmente está ocurriendo)

Mejor, sube todo tu codigo aquí:

https://jsfiddle.net/

Intenta representar con la mayor fidelidad posible el problema.

Y a ver. :P


Título: Re: [Pregunta]: Options no se desplazan correctamente
Publicado por: Leguim en 30 Noviembre 2018, 18:27 pm
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  ;)


Título: Re: [Pregunta]: Options no se desplazan correctamente
Publicado por: #!drvy en 30 Noviembre 2018, 19:43 pm
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


Título: Re: [Pregunta]: Options no se desplazan correctamente
Publicado por: Leguim en 30 Noviembre 2018, 22:00 pm
Gracias amigo! voy a probar a ver que tal..