Refresh a div with sql data without reloading the page

Question

Hello guys I’m making a site in php, in which there is a section of buttons. When I select a button, you should do a BD search and with the result, update a div under the buttons, without reloading the page.

It is an e-commerce system, in which when selecting the color, displays the sizes registered in that color.

What’s the best way to do that?

The code below selects the color:

if($n->getNome() == "COR"){ ?>
                    <div class="row cor">
                        <div class="bloco_cor">
                            <div id="cor" class="texto">Cor</div>
                            <?php  

                                $pVariacao = new ProdutoVariacaoDao();

                                foreach ($produto as $prod) {
                                    $pv = $prod->getIdProdutoBase();
                                }

                                $teste = $pVariacao->findByIdAgrupado($pv);

                                foreach ($teste as $teste1) {
                                    $teste2 = $teste1->getIdOpcaoVariacao1();
                                //}


                                $opVariacao = new OpcaoVariacaoDao();
                                $opVar1 = $opVariacao->findById($teste2);
                                //var_dump($opVar1);

                                //foreach ($opVar1 as $op) {
                                    //$idOpVariacao1 = $op->getIdOpcaoVariacao();
                                    //echo "id var: ", $idOpVariacao1;

                                    $cores= $opVar1->getValor();
                                    $arrayCores = split("/", $cores, 2); ?>
                                    <div id="<?php echo $teste2 ?>" class="opcao_cor">
                                        <input class="inputIdProd" type="hidden" value="<?php echo $idProdutoBase; ?>">
                                        <div class="cor2" style="background-color:<?php echo $arrayCores[0];?>"></div>
                                        <div class="cor2" style="background-color:<?php echo $arrayCores[1];?>" ></div>
                                    </div>  
                            <?php } ?>      
                        </div>
                    </div>
        <?php } }?>

The following code selects the sizes entered in the BD for the color selected above:

<div id="tamanho" class="row tamanho">
                        <div class="bloco_tamanho">
                            <div class="texto">Tamanho</div>


                            <?php if (isset($_SESSION['tamanhos'])) {

                                $opVariacao2 = new OpcaoVariacaoDao();
                                $tamanhos = unserialize($_SESSION['tamanhos']); 

                                foreach ($tamanhos as $tam) { 
                                    $id = $tam->getIdOpcaoVariacao2();
                                    $estoque = $tam->getEstoque();


                                    $t = $opVariacao2->findById($id);

                                    if ($estoque == 0) { ?>
                                        <div class="tam tam_ausente" id="tam1"><span></span><?php echo $t->getValor(); ?></div>
                                    <?php } else { ?>
                                        <div class="tam" id="tam1"><span></span><?php echo $t->getValor(); ?></div>
                                    <?php } ?>

                                <?php } ?>


                            <?php } ?>



                        </div>
                    </div>

Answer 1

Use ajax:

$("select[name=cor]").change(function(){
    $.getJSON("linkdeconsulta",{idcor:$(this).val()},
        function(data){
            $.each(data, function(i, obj){
                $(".classdadivquevaireceberovalor").val(obj.valortamanho);
            });
          }
        );
});

In the query link you will put to return an array of size type JSON.