1

Tengo un problema al agregar un nuevo select dinamicamente en html con javascript, el problema es que ya tengo un select que carga su contenido con php y de una base de datos, tengo un boton para que mis usuarios puedan agregar un select pero el probema es que este select como se carga desde javascript no carga los datos desde mi base de datos con php, como puedo hacerlo?

En la imagen que adjunto abajo tengo dos input para que las personas agreguen un nombre y una canidad junto con un icono para agregar mas campos.

introducir la descripción de la imagen aquí

Si yo hago clic en el boton para agregar mas campos se agregan correctamente:

introducir la descripción de la imagen aquí

Quiero cambiar el input del nombre por un select que cargue su contenido desde mi base de datos, si coloco el primer select con los datos cargados desde mi base, funciona sin problemas pero al agregar nuevos campos ya no carga la información.

Este es la forma con la que cargo mis select:

<label for="sell">Selecciona una empresa:</label>
 <select class="form-control" id="empresa" name="empresa">
    <?php
        $empresas = new ConsultaEmpresa();
        $empresasGeneral = $empresas->consultarEmpresas();
        foreach ($empresasGeneral as $key => $value) {
            echo "<option id='cuenta' value=".$value['id_empresas'].">".$value['empresa']."</option>";
        }
    ?>
</select>

Y la forma en la que agrego mis inputs es con JavaScript de esta manera:

$(document).ready(function(){
    var maxField = 10; //Input fields increment limitation
    var addButton = $('.add_button'); //Add button selector
    var wrapper = $('.field_wrapper'); //Input field wrapper
    var fieldHTML = '<div>'+
                    '<input type="text" name="field_name[]" placeholder="Agrega un nombre" value=""/> '+
                    '<input type="text" placeholder="Agrega una cantidad" name="field_cantidad[]" id="cantidad" onKeyPress="return soloNumeros(event)" value=""/>'+
                    '<a href="javascript:void(0);" class="remove_button" title="Remove field"><img src="img/removeuser.png" width="40px"/></a></div>'; //New input field html 
    var x = 1; //Initial field counter is 1
    $(addButton).click(function(){ //Once add button is clicked
        if(x < maxField){ //Check maximum number of input fields
            x++; //Increment field counter
            $(wrapper).append(fieldHTML); // Add field html
        }
    });
    $(wrapper).on('click', '.remove_button', function(e){ //Once remove button is clicked
        e.preventDefault();
        $(this).parent('div').remove(); //Remove field html
        x--; //Decrement field counter
    });
});
1
  • 1
    Si los options son los mismos, porque no clonas el select existente?
    – alanfcm
    Commented el 5 mar. 2021 a las 17:45

1 respuesta 1

1

Si los options son los mismos, puedes clonar el select, lo primero que haces es cambiar el id por una clase asi:

<label for="sell">Selecciona una empresa:</label>
 <select class="form-control empresa" name="empresa">
    <?php
        $empresas = new ConsultaEmpresa();
        $empresasGeneral = $empresas->consultarEmpresas();
        foreach ($empresasGeneral as $key => $value) {
            echo "<option id='cuenta' value=".$value['id_empresas'].">".$value['empresa']."</option>";
        }
    ?>
</select>

Luego para clonarlo:

$(addButton).click(function(){ //Once add button is clicked
        if(x < maxField){ //Check maximum number of input fields
            x++; //Increment field counter
            $(wrapper).append($('.empresa')[0]); // Add field html
        }
    });
3
  • Lo voy a intentar como mencionas, no pensé en clonarlo Commented el 5 mar. 2021 a las 18:42
  • Tenias razon, funciono la idea de clonar el elemento pero use esta funcion dentro de mi evento click: $('#prueba').clone().appendTo('.field_wrapper'); Commented el 8 mar. 2021 a las 16:57
  • Muchas gracias por tu ayuda! Commented el 8 mar. 2021 a las 16:58

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.