-1

Buen día chicos Tengo 1 formulario donde debo seleccionar pais y ciudad y dos bases de datos, 1 de paises y otra de ciudades.

Lo que necesito es elegir 1 pais y que se filtren las ciudades en el mismo formulario.

¿Como puedo lograr eso de forma dinámica, es decir, si elijo México, que en el segundo input, se filtren las ciudad solo de México?

Actualmente tengo los elementos en listas ordenadas.

Saludos

1
  • ¿Podrías compartir cómo tienes el código para ver dónde hay un error?
    – AQMR
    Commented el 1 mar. 2021 a las 11:35

1 respuesta 1

0

introducir el código aquíEstimado, según entiendo tiene dos bases de datos (supongo que serán 2 tablas en realidad). Para poder hacerlo de forma simple (muy simple) lo ideal seria tener los países por id y, en una tabla de ciudades tener una columna en relación al país que pertenece, es decir, "México" en la tabla de países puede tener el id 1, entonces en la tabla de ciudades uno puede tener "Jalisco" y poseer una columna "país" y tener la referencia del país con Id 1. Esto es en referencia a como guardar la información en la base de datos, ahora bien, para poder filtrar los elementos, ya que hay 2 listas, se puede lograr colocando un evento onClick sobre cada elemento "li" del HTML y filtrarlo por JavaScript de la siguiente manera.

function filtrar(paisId) {
    let ol = document.getElementById('ciudad');
    let li = ol.getElementsByTagName("li");
    
    for (var i = 0; i < li.length; ++i) {
        if (li[i].value != paisId) {
            li[i].style.display = "none";
        } else {
            li[i].style.display = "block";
        }
    }
}
<ol id="pais">
    <li id="1" onclick="filtrar(1)">Argentina</li>
    <li id="2" onclick="filtrar(2)">Mexico</li>
    <li id="3" onclick="filtrar(3)">Uruguay</li>
</ol>

<ol id="ciudad">
    <li value="1">Misiones</li>
    <li value="1">Chaco</li>
    <li value="2">Jalisco</li>
    <li value="2">Sinaloa</li>
    <li value="3">Artigas</li>
    <li value="3">Colonia</li>
</ol>

Entonces Cuando se arman las listas con la información traída desde la base de datos, se les coloca dinámicamente el id de pertenencia, luego por JavaScript se obtienen los elementos de la lista de ciudades, se los recorre con un for simple y se evalúa que si no tienen el mismo id se ocultan, caso contrario se muestran. Es la manera mas simple que creo se puede solucionar tu dilema, quizás hay mejores pero para comenzar ya es algo.

Espero te sea útil!

3
  • gracias Ricardo! Hoy hago esta prueba ! saludos Commented el 9 mar. 2021 a las 14:03
  • Carlos, espero te sirva pero tuve un error, en la lista de ciudades el atributo debe ser "value" en lugar de "id" (no puede haber 2 "id's" iguales). Te pido disculpas pero ya lo corregí! Igualmente consultame que cualquier duda lo vemos nuevamente! Saludos.
    – Ricardo
    Commented el 11 mar. 2021 a las 2:24
  • Gracias Ricardo! Ya resolvi el problema con Ajax! muchas gracias! Commented el 30 mar. 2021 a las 2:45

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.