0

Amigos como estan, tengo el siguiente codigo en javascript que me carga las listas desplegables en cascada de Departamento, Provincia y Distrito. Al inicio se quedan desabilitas las opciones de provincia y distrito hasta que se seleccione un departamento, una vez seleccionado se habilita la provincia y asi hasta el distrito. En el metodo crear funciona perfectamente al momento de crear los datos del usuario, cargan las listas y se guarda la informacion, pero al momento de la edicion, no se estan cargando los datos correspondientes, se quedan en blanco para que de nuevo se vuelva a seleccionar los valores, espero me puedan ayudar

$(document).ready(function () {
    $('#select_departamento').attr('disabled', true);
    $('#select_provincia').attr('disabled', true);
    $('#select_distrito').attr('disabled', true);
    CargarDepartamento();

    $('#select_departamento').change(function () {
        var departamentoId = $(this).val();
        if (departamentoId > 0) {
            CargarProvincia(departamentoId);
        }
        else {
            alert("Seleccione Departamento");
            $('#select_provincia').empty();
            $('#select_distrito').empty();
            $('#select_provincia').attr('disabled', true);
            $('#select_distrito').attr('disabled', true);
            $('#select_provincia').append('<option>--Select Provincia--</option>');
            $('#select_distrito').append('<option>--Select Distrito--</option>');
        }
    });

    $('#select_provincia').change(function () {
        var provinciaId = $(this).val();
        if (provinciaId > 0) {
            CargarDistrito(provinciaId);
        }
        else {
            alert("Seleccione Provincia");
            $('#select_distrito').empty();
            $('#select_distrito').attr('disabled', true);
            $('#select_distrito').append('<option>--Select Distrito--</option>');
        }
    });
});

function CargarDepartamento() {
    $('#select_departamento').empty();

    $.ajax({
        url: '/Propietarios/GetDepartamento',
        success: function (response) {
            if (response != null && response != undefined && response.length > 0) {
                $('#select_departamento').attr('disabled', false);
                $('#select_departamento').append('<option>--Select Departamento--</option>');
                $('#select_provincia').append('<option>--Select Provincia--</option>');
                $('#select_distrito').append('<option>--Select Distrito--</option>');
                $.each(response, function (i, data) {
                    $('#select_departamento').append('<option value=' + data.id + '>' + data.departamento + '</option>');
                });
            }
            else {
                $('#select_departamento').attr('disabled', true);
                $('#select_provincia').attr('disabled', true);
                $('#select_distrito').attr('disabled', true);
                $('#select_departamento').append('<option>--Desabilitado--</option>');
                $('#select_provincia').append('<option>--Desabilitado--</option>');
                $('#select_distrito').append('<option>--Desabilitado--</option>');
            }
        },
        error: function (error) {
            alert(error);
        }
    });
}

function CargarProvincia(departamentoId) {
    $('#select_provincia').empty();
    $('#select_distrito').empty();
    $('#select_distrito').attr('disabled', true);

    $.ajax({
        url: '/Propietarios/GetProvincia?Id=' + departamentoId,
        success: function (response) {
            if (response != null && response != undefined && response.length > 0) {
                $('#select_provincia').attr('disabled', false);
                $('#select_provincia').append('<option>--Select Provincia--</option>');
                $('#select_distrito').append('<option>--Select Distrito--</option>');
                $.each(response, function (i, data) {
                    $('#select_provincia').append('<option value=' + data.id + '>' + data.provincia + '</option>');
                });
            }
            else {
                $('#select_provincia').attr('disabled', true);
                $('#select_distrito').attr('disabled', true);
                $('#select_provincia').append('<option>--Desabilitado--</option>');
                $('#select_distrito').append('<option>--Desabilitado--</option>');
            }
        },
        error: function (error) {
            alert(error);
        }
    });
}

function CargarDistrito(provinciaId) {
    $('#select_distrito').empty();

    $.ajax({
        url: '/Propietarios/GetDistrito?Id=' + provinciaId,
        success: function (response) {
            if (response != null && response != undefined && response.length > 0) {
                $('#select_distrito').attr('disabled', false);
                $('#select_distrito').append('<option>--Select Distrito--</option>');
                $.each(response, function (i, data) {
                    $('#select_distrito').append('<option value=' + data.id + '>' + data.distrito + '</option>');
                });
            }
            else {
                $('#select_distrito').attr('disabled', true);
                $('#select_distrito').append('<option>--Desabilitado--</option>');
            }
        },
        error: function (error) {
            alert(error);
        }
    });
}
<div class="form-group">
    <label class="control-label">Departamento</label>
    <select asp-for="UbigeoId" class="form-select" id="select_departamento" required></select>
    <span asp-validation-for="UbigeoId" class="text-danger"></span>
</div>
<div class="form-group">
    <label class="control-label">Provincia</label>
    <select asp-for="UbigeoProvId" class="form-select" id="select_provincia" required></select>
    <span asp-validation-for="UbigeoProvId" class="text-danger"></span>
</div>
<div class="form-group">
    <label class="control-label">Distrito</label>
    <select asp-for="UbigeoDistId" class="form-select" id="select_distrito" required></select>
    <span asp-validation-for="UbigeoDistId" class="text-danger"></span>
</div>

1 respuesta 1

0

Saludos

Te sugiero lo siguiente:

1.- Modificar

// Variables globales; inicializadas en null (el que corresponda indica no seleccionado)
var idDepto = null;
var idPro = null;
var idDis = null;

$(document).ready(function () {
   // Todo lo anterior

   // A continuación lo que se indica en el paso 2 (abajo)
   CargarDepartamento(); // Pasar ésta línea al final
}

2.- Para cada elemento en cascada (Apoyándote de variables auxiliares)

En caso de nuevo:

  • Establecer el valor al que corresponda que aun no ha sido seleccionado.

En caso de edición:

  • Establecer el valor al que corresponda al dato seleccionado.

3.- Validar el dato y estado del select

En cada procedimiento CargarDepartamento, CargarProvincia y CargarDistrito donde poblas el select con los option aplicar en su append:

// Usar la variable global idDepto, idPro o idDis según el elemento poblando
// Por ejemplo con idDepto
$.each(response, function (i, data) {
   $('#select_departamento').append('<option value=' + data.id + ' ' + (data.id == idDepto ? 'selected' : '' )+ ' >' + data.provincia + '</option>');
});
idDepto = null; // Indicamos no seleccionado para cada elemento
// Esperamos un momento antes de pasar al siguiente elemento y variable global
setTimeout(function () {
   $('#select_provincia').val(idPro)
   $('#select_provincia').change()
}, 200);

Cuidado con el tipo de datos que cada data.id es respecto al que tengas en la variable global.

De la forma que expongo es como lo he controlado; el comportamiento de primero a cada select asignar el valor actual (sea de nuevo o edición) no siempre ha dado buenos resultado al repoblar el componente.

Desde luego, para cuando el usuario vuelve a interactuar moviendo opciones, como su variable global esta a null ya no se establece como valor seleccionado ninguno.

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.