Fill combobox with ajax

Question

Hello, I have a page that shows a list of system users in a table. At the top of the page, I have 3 combobox that filter the results of the table without refresh. I need to popular the second and third combo dynamically and, at the same time, change the results of the table. Only that I stopped before starting the table rs The second combo I managed to fill according to the first, but the third I can not popular... Someone can help me ?

Follows the code:

if($funcao == 'combo1') {

    $sql = "select codfilial, nome from filial where codempresa=$codempresa order by nome;";
    $rst = my_query($connR, $sql);

    $selectfilial = "<option></option>" . getOptionSelect($rst, 'codcliente', 'nome');
    echo $selectfilial;

    exit;
}

if($funcao == 'combo2') {

    $sql = "select codequipe, nome from equipe where codempresa=$codempresa and codfilial=$codfilial order by nome";
    $rst = my_query($connR, $sql);

    $selectequipe = "<option></option>" . getOptionSelect($rst, 'codequipe', 'nome');
    echo $selectequipe;

    exit;
}

<script>
function buscarfilial(){
    $("#funcao").val("combo1");
    data = $('#formpesq').serialize();
    var jqxhr = $.ajax( {
        url: "/personificar_usuario.php",
        type: "POST",
        timeout:default_timeout,
        data: data})
        .done(function(retorno) {
            arr = retorno;
            $("#filial").replaceWith('<select class="form-control" name="filial" id="filial" style="width: 250px;">'+arr+'</select>');
        });
}

 function buscarequipe(){
    $("#funcao").val("combo2");
    data = $('#formpesq').serialize();
    var jqxhr = $.ajax( {
        url: "/personificar_usuario.php",
        type: "POST",
        timeout:default_timeout,
        data: data})
        .done(function(retorno) {
            arr = retorno;
            $("#equipe").replaceWith('<select class="form-control" name="equipe" id="equipe" style="width: 250px;">'+arr+'</select>');
        });
}

<?
        $sql = "select codempresa, nome from empresa order by nome;";
        $rst = my_query($connR, $sql);
        $selectempresa = getOptionSelect($rst, 'codempresa','nome');
        global $codempresa;
        $codempresa = $rst[0]['codempresa'];
        $codempresa = explode('|',$codempresa);
        $codempresa = $codempresa[0];


    ?>

    <div id="formulario" class="container-fluid">
        <div class="row">
            <div class="plRel" id="relpesq">
                <form class="form-inline" method="post" name="formpesq" action="/personificar_usuario.php" id="formpesq" style="margin-bottom: 0.25em; padding-top: 0.25em;">
                    <input type="hidden" name="funcao" id="funcao" value="pesquisa"/>
                    <div class="form-group">
                        <label>Empresa</label>
                        <select class="form-control" name="codempresa" value="codempresa" id="codempresa" onchange="javascript:buscarfilial();" style="width: 250px;"><?=$selectempresa?></select>
                    </div>

                    <div class="form-group" style="margin-top: 5px">
                        <label style="margin-left: 5px">Filial</label>
                        <select class="form-control" name="filial" id="filial" style="width: 250px;"></select>
                    </div>

                    <div class="form-group" style="margin-top: 5px">
                        <label style="margin-left: 5px">Equipe</label>
                        <select class="form-control" name="equipe" id="equipe" style="width: 250px;"></select>
                    </div>

                </form>
            </div>
        </div>
    </div>

Thank you.

Answer 1

In your PHP use more "friendly" names to identify what does what.

<?php
    if($funcao == 'filial') {

        $sql = "select codfilial, nome from filial where codempresa=$codempresa order by nome;";
        $rst = my_query($connR, $sql);

        $selectfilial = "<option selected></option>" . getOptionSelect($rst, 'codcliente', 'nome');
        echo $selectfilial;

    } else if( $funcao == 'equipe') {

        $sql = "select codequipe, nome from equipe where codempresa=$codempresa and codfilial=$codfilial order by nome";
        $rst = my_query($connR, $sql);

        $selectequipe = "<option></option>" . getOptionSelect($rst, 'codequipe', 'nome');
        echo $selectequipe;

    }

    exit;
?>

Abstract your functions, creating only a parameterized becomes easier to maintain. You also do not need to stay giving replace to the element, just rewrite its HTML content:

<script>


$(document).on('change', '#codempresa, #filial', function(event) {
    event.preventDefault();

    var target = $(this).data('target');

    $("#funcao").val(target);

    $.ajax({
        url: "/personificar_usuario.php",
        type: "POST",
        timeout:default_timeout,
        dataType: 'html',
        data: $('#formpesq').serialize(),
        success: function(retorno){
            $('#' + target).html(retorno);
        },
        error: function(jqXHR, textStatus){
            console.log(textStatus, jqXHR);
        }
    });

});

</script>

In your form also put the event onchange in affiliate select. (Before it wasn’t working because you were rewriting it with jQuery):

<form class="form-inline" method="post" name="formpesq" action="/personificar_usuario.php" id="formpesq" style="margin-bottom: 0.25em; padding-top: 0.25em;">
    <input type="hidden" name="funcao" id="funcao" value="pesquisa"/>
    <div class="form-group">
        <label>Empresa</label>
        <select class="form-control" name="codempresa" id="codempresa" data-target="filial" style="width: 250px;"><?=$selectempresa?></select>
    </div>

    <div class="form-group" style="margin-top: 5px">
        <label style="margin-left: 5px">Filial</label>
        <select class="form-control" name="filial" id="filial" data-target="equipe" style="width: 250px;"></select>
    </div>

    <div class="form-group" style="margin-top: 5px">
        <label style="margin-left: 5px">Equipe</label>
        <select class="form-control" name="equipe" id="equipe" style="width: 250px;"></select>
    </div>

</form>

---

_{Note: The code is more conceptual, has not been tested and may contain errors.}