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.
Si yo hago clic en el boton para agregar mas campos se agregan correctamente:
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
});
});