Popular a select generated by javascript

Question

I am copying fields from a form with javascript, but in this form two input sane select and the option are generated from the result of a query. When copies are created query do not rotate and therefore select comes with no options to be selected.

HTML/PHP

How it was paid?

                       <?php 

                        $sql="SELECT `tpid`, `descricao` FROM `tp_pagto`";
                        $query = $mysqli->query($sql);
                        while($row=mysqli_fetch_row($query))
                        {?>

                        <option value="<?php echo $row[0]; ?>"><?php echo $row[1];?></option>


                    <?php }?>

JS

//CLONA O CAMPO DE DESPESAS DA PAGINA NOVA VIAGEM
$(document).ready(function(){
    var next = 1;
    $(".add-more").click(function(e){
        e.preventDefault();
        var addto = "#outra_dcentro" + next;
        var addRemove = "#outra_dcentro" + (next);
        next = next + 1;
        var newIn = '<input autocomplete="off" class="input form-control" id="outra_ddec' + next + '" name="outra_ddec' + next + '" type="text" placeholder="Qual a despesa?" data-items="8"/><input autocomplete="off" class="input form-control" id="outra_dvalor' + next + '" name="outra_dvalor' + next + '" type="text" placeholder="Qual o valor?" data-items="8"/><select class="form-control" id="outra_dpago' + next + '" name="outra_dpago' + next + '"><option disabled selected>Esta pago?</option><option value="nao">Não</option><option value="sim">Sim</option></select><select class="form-control" id="outra_dtppago' + next + '" name="outra_dtppago' + next + '"><option disabled selected>Como foi pago?</option><?php $sql="SELECT `tpid`, `descricao` FROM `tp_pagto`"; $query = $mysqli->query($sql); while($row=mysqli_fetch_row($query)) {?> <option value="<?php echo $row[0]; ?>"><?php echo $row[1];?></option><?php }?></select><input autocomplete="off" class="input form-control" id="outra_dnf' + next + '" name="outra_dnf' + next + '" type="text" placeholder="Numero da NF" data-items="8"/><input autocomplete="off" class="input form-control" id="outra_dforn' + next + '" name="outra_dforn' + next + '" type="text" placeholder="Fornecedor?" data-items="8"/><select class="form-control" id="outra_dcentro' + next + '" name="outra_dcentro' + next + '"><option disabled selected>Selecione o centro de custo</option><?php $sql="SELECT `centroid`, `descricao` FROM `centro`";$query = $mysqli->query($sql);while($row=mysqli_fetch_row($query)){?><option value="<?php echo $row[0]; ?>"><?php echo $row[1];?></option><?php }?>';
        var newInput = $(newIn);
        var removeBtn = '<button id="remove' + (next - 1) + '" class="btn btn-danger remove-me" >-</button></div><div id="field">';
        var removeButton = $(removeBtn);
        $(addto).after(newInput);
        $(addRemove).after(removeButton);
        $("#outra_dcentro" + next).attr('data-source',$(addto).attr('data-source'));
        $("#outra_dcentro").val(next);  

            $('.remove-me').click(function(e){
                e.preventDefault();
                var fieldNum = this.id.charAt(this.id.length-1);
                var fieldID = "#outra_ddec" + fieldNum;
                $(this).remove();
                $(fieldID).remove();

                var fieldNum = this.id.charAt(this.id.length-1);
                var fieldID = "#outra_dvalor" + fieldNum;
                $(this).remove();
                $(fieldID).remove();

                var fieldNum = this.id.charAt(this.id.length-1);
                var fieldID = "#outra_dpago" + fieldNum;
                $(this).remove();
                $(fieldID).remove();

                var fieldNum = this.id.charAt(this.id.length-1);
                var fieldID = "#outra_dtppago" + fieldNum;
                $(this).remove();
                $(fieldID).remove();

                var fieldNum = this.id.charAt(this.id.length-1);
                var fieldID = "#outra_dnf" + fieldNum;
                $(this).remove();
                $(fieldID).remove();

                var fieldNum = this.id.charAt(this.id.length-1);
                var fieldID = "#outra_dforn" + fieldNum;
                $(this).remove();
                $(fieldID).remove();

                var fieldNum = this.id.charAt(this.id.length-1);
                var fieldID = "#outra_dcentro" + fieldNum;
                $(this).remove();
                $(fieldID).remove();
            });
    });  


});

Here in the JS the variable NewIn contains all the code of the same inputs, including the select/option with the problem among others, the name is changed and then added the new fields.

I guess I can’t run a query by javascript, but can I pass the php array that contains the option values to JS? Or is there a more efficient way to do that?

Answer 1

Return the array as json in a php file

<?php 
header('Content-Type: application/json');

$sql="SELECT `tpid`, `descricao` FROM `tp_pagto`";
$query = $mysqli->query($sql);

echo json_encode($query)
?>

Receive the contents of this array by an ajax request and populate the select (Jquery)

var select = $("#selectlistas"); 

$.ajax({ 
    url: 'urldophp.php', 
    type: 'POST', 
    success: function(dados){ 
        $.each(dados, function(index, dado){ 
            var campo1 = dado.campo1; 
            var campo2= dado.campo2; 
            select.append($('<option>', {
                value: campo1, 
                text:  campo2 
                })); 
        }); 
    } 
});