0

Hola tengo este problema con dos select2 anidados (uno depende del otro), lo primero es que lleno un datatable.net con los datos y de estos los paso mediante oneclick para poder editarlos:

EditarTrabajador = function ( CodOficina, DepOficina) {

 $.post("/Oficina/OficinaGeneral",
     function (data) {
         $.each(data, function (i, item) {
             $('#Ecbooficinageneral').append('<option value="' + item.Cod_Oficina_G + '">' + item.Nom_OFicina_G + '</option>');
             $("#Ecbooficinageneral").val(DepOficina);
             $('#Ecbooficinageneral').change();             
         });
     });

 $('#Ecbooficinageneral').on('change', function () {        
            var codofi = $('#Ecbooficinageneral').val();            
                $('#Ecbooficinadep').val(null).trigger('change');
                $('#Ecbooficinadep').html('<select class="form-control select2" id="cbooficinadep" style="width: 100%;">' +
                                        '<option selected="selected" value="">Seleccione Oficina Dependiente</option>' +
                                        '</select>');
                $.post("/Oficina/OficinaDep",
                    { codoficina: codofi },
                    function (data) {
                        $.each(data, function (i, item) {
                            $('#Ecbooficinadep').append('<option value="' + item.Cod_Oficina_D + '">' + item.Nom_Oficina_D + '</option');
                            $("#Ecbooficinadep").val(CodOficina);
                            $('#Ecbooficinadep').change();
                        });
                    });
        });

}

el problema es que al momento de llenar el primer combo y poner:

$("#Ecbooficinageneral").val(DepOficina);
$('#Ecbooficinageneral').change();

el change hace que se llene el mismo dato en el siguiente combo varias veces, como puedo hacer que es cargue el primer select con la opcion a editar, limpiar el segundo select y cargarla con la opcion a editar igualmente?

2 respuestas 2

0

Primero, ¿Por que razón tienes el evento declarado dentro de la función?.

Podrías ponerlo en el contexto global del js o en el load de la pagina. Haciéndolo de esta forma lo estas asociando una vez iniciada la función.

Según la documentación de Select2

change: Triggered whenever an option is selected or removed.

change: se dispara cada vez que se selecciona o elimina una opción.

Te recomiendo usar este.

select2:select Triggered whenever a result is selected.

select2:select Disparo cuando se selecciona un resultado.

El uso es simple

$('#mySelect2').on('select2:select', function (e) {
    var data = e.params.data;
    console.log(data);
});

Ademas tienes acceso a los datos seleccionados realmente.

e.params.data = 
{
  "id": 1,
  "text": "Tyto alba",
  "genus": "Tyto",
  "species": "alba"
}

Mas sobre Select2 https://select2.org/programmatic-control/events

0

Estas funciones llenan cualquier tipo de combo:

 function llenarCmb(combo, datos) {
        combo.find('option').each(function () {
            if ($(this).val() != "-1") {
                $(this).remove();
            }
        });
        for (var i = 0; i < datos.length; i++) {
            combo.append("<option value='" + datos[i]["id"] + "'>" + datos[i]["nombre"] + "</option>");
        }
    }
    function llenarCombo(name, rutaControlador, strAccion, funcAppendCombo, id_cmb_padre) {
        $("select[name=" + name + "]").each(function () {
            combo = $(this);
            $.ajax({
                url: rutaControlador,
                data: { accion: strAccion, id_padre: id_cmb_padre },
                type: "POST",
                dataType: "json",
                success: function (datos) {
                    funcAppendCombo(combo, datos);
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    //console.log(jqXHR);
                    alert("No se pudo cargar el combo " + name + " : " + textStatus + ' Thrown: ' + errorThrown);
                },
                complete: function (jqXHR, status) {
                    //console.log(jqXHR);
                    //alert("complete\njqXHR="+jqXHR+"\nstatus="+status);
                }
            });
        });
    }

Y estos son ejemplos de como llamarla:

llenarCombo("nameComboIndependiente", "url", "metodoAejecutarEnElServer", llenarCmb, null);//Combo independiente           
$("#idComboIndependiente").change(function () {
     llenarCombo("nameComboDependiente", "url", "OtroMetodoAejecutarEnElServer", llenarCmb, $(this).val());//Combo dependiente
});

Las funciones siempre esperan un json de [{id:valorId,nombre:valorNombre},{id:valorId,nombre:valorNombre}] que tienes que armar en el lenguaje del server java,php,c# y en ningun momento violas el MVC.

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.