1

Lo que me sucede es que estoy agregando una fila de bootstrap con un select(mendiante MySQL y PHP estoy agregandole los options) y dos inputs dentro, hasta ahí todo normal. El problema es que cada vez que agrego una nueva fila con el select y los inputs, se agregan pero el select no tiene valores. No solo eso sino que los valores del primer select se duplican.

Ej. PRIMERA VEZ QUE AGREGO UNA FILA Seleccionar Valvula 2da automatica RF 150 Ladrillo

SEGUNDA VEZ QUE AGREGO UNA FILA Seleccionar Valvula 2da automatica RF 150 Ladrillo Valvula 2da automatica RF 150 Ladrillo

    var counter = 1;

    $("#addNewItem").click(function(){

        if (counter < 1) {
            counter = 1;
        }

        $('.col-sm-12.are-data').hide(50);

        $(".row.products").append(
            "<div class='row item "+counter+"'>" + 
                "<div class='col-sm-1 input-products'>" +
                    "<label for='id-item' style='text-align: center;margin: 0 48%;'>ID</label>" +
                    "<h5 name='id-item' id='id-item' class='id-item'>"+ counter +"</h5>" +
                "</div>" +
                "<div class='col-sm-7 input-products'>" +
                    "<label for='producto' style='text-align: center;'>DESCRIPCION PRODUCTO</label>" +
                    "<select class='text-center data' id='producto' name='producto["+counter+"]' style='width:100%;'><option value=''>Seleccionar</option></select>" +
                "</div>" +
                "<div class='col-sm-2 input-products'>" +
                    "<label for='cantidad' style='text-align: center;'>CANTIDAD</label>" +
                    "<input type='text' class='data' id='cantidad' name='cantidad["+counter+"]' style='width:100%;'>" +
                "</div>" + 
                "<div class='col-sm-2 input-products'>" +
                    "<label for='unidad' style='text-align: center;'>UNIDAD</label>" +
                    "<input type='text' disabled name='unidad["+counter+"]' id='unidad' style='width:100%;'>" + 
                "</div>" +
            "</div>").show(0);

            counter++;

            $.get("../../PHP/obrasselects.php",function (data){
            //alert(data);
                var resp = JSON.parse(data);
                if (resp.status == 0) {
                    for (var a = 0; a < Object.keys(resp.productos).length; a++){ 

                        $("#producto").append($('<option value="' + resp.productos[a].id_producto + '">' + resp.productos[a].descripcion + '</option>'))
                    
                    }     
                 }
            })
        });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

            <div class="row products"></div>
                                <button class="btn btnObras" type="button" id="addNewItem" style="width:35%;">AGREGAR</button>

1 respuesta 1

0

Claro, está haciendo lo que le pides. Te explico.

Al momento que creas tu select le estás poniendo id="producto" Al primer click el DOM crea el elemento tal cual lo pusiste, sin embargo recuerda que los id no se pueden repetir (Por eso se llaman ID) Cuando vuelves a dar click el dom vuelve a crear un select idéntico al que pediste por primera vez, Pero ya existe! El hacer $('#producto') estas pidiendole al DOM que te regrese el primer ID que encuentre, por eso, a pesar que crea el nodo del select, ese no es el verdadero 'producto' e inserta las opciones al primer select, siempre al primero. Puedes hacer un id dinámico con el counter que declaraste

"<select class='text-center data' id='producto_"+counter+"' name='producto["+counter+"]' style='width:100%;'><option value=''>Seleccionar</option></select>"

Y luego pedir al DOM que traiga ese select que creaste único

var selector = "#producto_" + counter;
for (var a = 0; a < Object.keys(resp.productos).length; a++){ 
   $(selector).append($('<option value="' + resp.productos[a].id_producto + '">' + resp.productos[a].descripcion + '</option>'));

}     

Te dejo el código completo. Como recomendación para este tipo de casos es mejor utilizar clases y hacer selectores con clases, los ID se deben reservar para casos específicos.

var counter = 1;

    $("#addNewItem").click(function(){

        if (counter < 1) {
            counter = 1;
        }

        $('.col-sm-12.are-data').hide(50);

        $(".row.products").append(
            "<div class='row item "+counter+"'>" + 
                "<div class='col-sm-1 input-products'>" +
                    "<label for='id-item' style='text-align: center;margin: 0 48%;'>ID</label>" +
                    "<h5 name='id-item' id='id-item' class='id-item'>"+ counter +"</h5>" +
                "</div>" +
                "<div class='col-sm-7 input-products'>" +
                    "<label for='producto' style='text-align: center;'>DESCRIPCION PRODUCTO</label>" +
                    "<select class='text-center data' id='producto_"+counter+"' name='producto["+counter+"]' style='width:100%;'><option value=''>Seleccionar</option></select>" +
                "</div>" +
                "<div class='col-sm-2 input-products'>" +
                    "<label for='cantidad' style='text-align: center;'>CANTIDAD</label>" +
                    "<input type='text' class='data' id='cantidad' name='cantidad["+counter+"]' style='width:100%;'>" +
                "</div>" + 
                "<div class='col-sm-2 input-products'>" +
                    "<label for='unidad' style='text-align: center;'>UNIDAD</label>" +
                    "<input type='text' disabled name='unidad["+counter+"]' id='unidad' style='width:100%;'>" + 
                "</div>" +
            "</div>").show(0);

            counter++;

            $.get("../../PHP/obrasselects.php",function (data){
            //alert(data);
                var resp = JSON.parse(data);
                if (resp.status == 0) {
                    var selector = "#producto_" + counter;
                    for (var a = 0; a < Object.keys(resp.productos).length; a++){ 
                        $(selector).append($('<option value="' + resp.productos[a].id_producto + '">' + resp.productos[a].descripcion + '</option>'))

                    }     
                 }
            })
        });
1
  • ¡Gracias! Se soluciono, no estaba teniendo en cuenta la particularidad del id. Lo único para "agregar" (de todos modos es cuestión de mi código). No me había funcionado la primera vez que lo probé, tuve que agregarle los siguiente a la variable selector: var selector = "#producto_" + (counter-1); Más allá de eso.. ¡Muchas gracias! Excelente respuesta y muy clara. Commented el 3 mar. 2019 a las 1:20

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.