How to edit nested Selects jquery?

Question

How to edit nested Selects jquery?

Navigation

#1 by (0 votes)
#2 by (0 votes)

0

Hi, I have this problem with two nested select2s (one depends on the other), the first thing is that I filled a datatable.net with the data and I passed them through oneclick to be able to edit them:

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();
                        });
                    });
        });

}

The problem is that when filling the first combo and put:

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

the change causes the same data to be filled in the following combo several times, how can I load the first select with the option to edit, clean the second select and load it with the option to edit anyway?

javascript jquery select2 post query

asked by Nik.Code 02.08.2018 в 16:56

source

2 answers

0

These functions fill any type of 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);
                }
            });
        });
    }

And these are examples of how to call it:

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

The functions always expect a json of [{id:valorId,nombre:valorNombre},{id:valorId,nombre:valorNombre}] that you have to arm in the language of the server java, php, c # and at no time violate the MVC.

answered by 02.08.2018 в 17:15

Element repeated elements in a .txt file How to load the detail of a site in a single fragment?

score 0 · Accepted Answer

First, why do you have the declared event inside the function?

You could put it in the global context of the js or in the load of the page. Doing it this way you are associating it once the function started.

According to the Select2 documentation

change: Triggered whenever an option is selected or removed.

change: triggers each time an option is selected or deleted.

I recommend you use this one.

select2: select Triggered whenever a result is selected.

select2: select Trigger when a result is selected.

The use is simple

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

You also have access to the selected data really.

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