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