0

Tengo esto en mi html:

Al iniciar ingresa al JS a la function indicada en el onload, despues se dirige a CargarCiudades, donde el select se rellena con la informacion correcta, pero al seleccionar alguna ciudad, el segundo select se debe de rellenar automaticamente con los municipios de esa ciudad, tengo mi controller indicado en el ajax para esa parte:

 public JsonResult GetMunicipios(ConsultaMunicipio obj,string municipio)
        {
            List<Municipio> list = new List<Municipio>();           
            list = obj.Municipio(municipio);
            var lista = Json(list, JsonRequestBehavior.AllowGet);
            return lista;
        }

clase:

public class Municipio
    {
        public string idmunipio { get; set; }
        public string nombremunicipio{ get; set; }
    }

--

   public class ConsultaMunicipio
            {
            
                public List<Municipio> Municipio(string municipio)
                {
                    List<Municipio> list = new List<Municipio>();
                    municipioEntities muni = new municipioEntities ();
             
                                           
                    var querymuncipio= (//consulta sql que funciona perfectamentewhere c.Ciudad== ciudad
                                            select new { m.id, m.Nombre }).ToList().Distinct();
        
                                        //trae id y nombre de municipio segun ciudad
        
                    foreach (var item in querymuncipio.ToList())
                    {
                        Municipio items = new Municipio();
                        list.Add(new Municipio()
                        {                   
                            idmunipio = item.ID.ToString(),
                            nombremunicipio= item.Nombre.ToString(),
        
                        }
                        );
                    }
                    return list;
                }
            }

function CargarPagina() {
    CargarCiudades();
}


function CargarCiudades() {

    var combociudad = document.getElementById('ciudad')

    $.ajax({
        type: "POST",
        url: '/Ciudades/GetCiudades',
        dataType: "json",
        contentType: "application/json; charset=utf-8",
    })
        .done(function (lista) {
            console.log(lista);

            lista.forEach(e => {
                const option = document.createElement('option');
                option.text = e._ciudad;
                option.value = e._clave;
                comboZona.appendChild(option);
            })

        });
 setTimeout("CargarMunicipios()", 2000)  
}

function CargarMunicipios() {


var comboZona = document.getElementById('ciudad').value;

var combomunicipio = document.getElementById('municipio');

    $.ajax({
        type: "POST",
        url: '/Ciudad/GetMunicipios',
        dataType: "json",
        contentType: "application/json; charset=utf-8",
    })
        .done(function (lista) {
            console.log(lista);
            var datosDrop = '';

            for (i = 0; i < lista.length; i++) {
                datosDrop += '<option id="' + lista[i].ID + '" value="' + lista[i].ID + '">' + lista[i].Nombre.toUpperCase() + '</option>';
            }
            document.getElementById('municipio').innerHTML = datosDrop;

        });

}
<html>
<body onload="CargarPagina()">
<select id="ciudad" name="" class="form-control dropdown-toggle" onchange="CargarCiudades()"></select>
<select id="municipio" name="" class="form-control dropdown-toggle" onchange="CargarMunicipios()">/select>                  
<script src="~/Js/Ciudades.js"></script>
</body>
</html>

El problema que tengo es que al seleccionar la ciudad el lista en el .done(function(lista)... despues de aparece vacio, por lo que mi segundo select esta vacio, y el parametro por el cual se rellena es por la clave de la ciudad

1 respuesta 1

0
<html>
<body onload="CargarPagina()">
<select id="ciudad" name="" class="form-control dropdown-toggle" onchange="CargarMunicipios()"></select>
<select id="municipio" name="" class="form-control dropdown-toggle">/select>                  
<script src="~/Js/Ciudades.js"></script>
</body>
</html>

en la propiedad del ajax data: tienes que enviar el valor de "var comboZona" para que puedas filtrar en la clase ConsultaMunicipio entonces cada vez que cambies el select ciudad se consultará los municipios asociados y se cargarán en el otro select.

Espero te sirva

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.