Estoy realizando dropDownList en cascada pero al momento de desplegarlo solo el primero muestra la informacion y al seleccionar algun elemento se supone el segundo actualizaria la lista pero no lo hace el cogido compila lo he revisado por horas y no encuentro la falla, este es el script
<script type="text/javascript">
$(document).ready(function () {
$("#IdDepartamento").change(function () {
//Se limpia el contenido del dropdownlist
$("#IdMunicipio").empty();
$.ajax({
type: 'POST',
//Llamado al metodo en el controlador
url: '@Url.Action("GetStateByIdDepartartamento", "municipio")',
dataType: 'json',
//Parametros que se envian al metodo del controlador
data: { IdDepartamento: $("#IdDepartamento").val() },
//En caso de resultado exitoso
success: function (municipio) {
if (municipio.length == 0) {
$("#IdMunicipio").append('<option value=""></option>');
}
else {
//Se agrega el elemento vacio para poder desplegar que seleccione una opcion
$("#IdMunicipio").append('<option value=""></option>');
$.each(municipio, function (i, municipio) {
$("#IdMunicipio").append('<option value="' + municipio.Value + '">' +
municipio.Text + '</option>');
});
}
//Recargar el plugin para que tenga la funcionalidad del componente
$("#IdMunicipio").select2({ placeholder: "Seleccione Municipio", width: "20%" });
},
//Mensaje de error en caso de fallo
error: function (ex) {
alert('Failed to retrieve states.' + ex);
}
});
return false;
})
});
</script>
y este es el controlador
public class UnidadesController : Controller
{
//Variable constante para definir el key de State en la Session
const string State_KEY = "State";
//Propiedad para extraer el listado de State de la Session simulando
acceso a la BD
public List<Models.municipio> LstMunicipio
{
get { return System.Web.HttpContext.Current.Session[State_KEY] !=
null ?
(List<Models.municipio>)System.Web.HttpContext.Current.Session[State_KEY]
: new List<Models.municipio>(); }
set { System.Web.HttpContext.Current.Session[State_KEY] = value; }
}
//En el constructor se da de alta todos los municipios que pueden ser
seleccionados
public UnidadesController()
{
LstMunicipio = new List<Models.municipio>();
LstMunicipio.AddRange(new List<Models.municipio>() {
new Models.municipio(){
IdMunicipio = 1, IdDepartamento = 1, Municipio = "Aguascalientes" },
new Models.municipio(){
IdMunicipio = 2, IdDepartamento = 1, Municipio = "Guadalajara" },
});
LstMunicipio.AddRange(new List<Models.municipio>() {
new Models.municipio(){
IdMunicipio = 1 , IdDepartamento = 2, Municipio = "Ibaraki ken" },
new Models.municipio(){
IdMunicipio = 2 , IdDepartamento = 2, Municipio = "Tokio" }
});
}
/// <summary>
/// Todos los municipios se cargan para mostrarse en el dropdownlist
/// </summary>
/// <returns></returns>
///Metodo para obtener especificamente 1 departamento by Id valor
retornado como Json
public JsonResult GetStateByIdDepartamento(int IdDepartamento)
{
return Json(new SelectList(LstMunicipio.Where(x => x.IdDepartamento
== IdDepartamento).ToList(), "IdMunicipio", "Municipio"));
}
public ActionResult Arope()
{
List<Models.departamento> lstDepartamento = new
List<Models.departamento>();
lstDepartamento.Add(new Models.departamento()
{
IdDepartamento = 1,
Departamento = "Antioquia"
});
lstDepartamento.Add(new Models.departamento()
{
IdDepartamento = 2,
Departamento = "Cundinamarca"
});
//Se asigna la variable al viewbag
ViewBag.IdDepartamento = new SelectList(lstDepartamento,
"IdDepartamento", "Departamento");
return View();
}
}
}
no se donde esta mal planteado la cuestion es que no logra realizar lo requerido
if ($('#IdMunicipio').data('select2')) { $('#IdMunicipio').select2('destroy'); }