Combox appear if there are records

Question

I have a form where the user selects the size, automatically fills the colors Combox:

The problem is that sizes will not always have colors and I would like that if there were no colors, the color box would not appear. See the code:

PHP

  if(mysqli_num_rows($sqlTamanhos) > 0){
    $visualizarT = "<div class=\"color-quality\">";
     $visualizarT .= "<div class=\"col-lg-10\" style=\"padding: 10px;\"><div style=\"font-size: 18px;\">Tamanho: </div>";
       $visualizarT .= "<select name=\"TamanhoProdutos\" class=\"form-control\" id='tamanhoProdutos'>";
         $visualizarT .= "<option value=\"selecione\">Selecione o tamanho</option>";    
          while($jmTamanhos = mysqli_fetch_object($sqlTamanhos)){
                $visualizarT .= "<option value='".$jmTamanhos->Tamanho."'>".$jmTamanhos->Tamanho."</option>";               
       }
       $visualizarT .= "</select>";
     $visualizarT .= "</div>";
   $visualizarT .= "<div class='col-lg-10' id=\"cores\"></div>";
 $visualizarT .= "</div>";
}

Jquery

$(function(){
            $('#tamanhoProdutos').change(function(){
                if($(this).val()){
                    $('#cores').show();
                    $.getJSON('cores.php?search=',{idProduto: <?php echo $visualizar->IDProdutos; ?>, tamanho: $(this).val(), ajax: 'true'}, function(j){

            var options = '<div style="font-size: 18px;">Cores:</div><select name="Cores" class="form-control"><option value="selecione">Escolha a Cor</option>';
                        for (var i = 0; i < j.length; i++) {
                            options += '<option value="' + j[i].idT + '">' + j[i].coresT + '</option>';
                        }
              options += '</select>';
                        $('#cores').html(options).show();
                        $('.carregando').hide();
                    });
                }
            });
        });

Query

$key = $_REQUEST['idProduto'];
$tamanho = $_REQUEST['tamanho'];

$sqlCores = mysqli_query($conexao,"SELECT * FROM loja_estoques WHERE IDProdutos = '".$key."' AND Tamanho = '".$tamanho."' GROUP BY Cores ORDER BY Cores");

while ($jmCores = mysqli_fetch_assoc($sqlCores)){
            $coresTamanho[] = array(
            'idT'   => $jmCores['IDEstoques'],
             'coresT' => utf8_encode($jmCores['Cores']),
     );
}
echo (json_encode($coresTamanho));

Answer 1

It’s simple, return information in the query’s json response saying whether or not there are colors:

$key = $_REQUEST['idProduto'];
$tamanho = $_REQUEST['tamanho'];

$sqlCores = mysqli_query($conexao,"SELECT * FROM loja_estoques WHERE IDProdutos = '".$key."' AND Tamanho = '".$tamanho."' GROUP BY Cores ORDER BY Cores");
$jmCores = mysqli_fetch_assoc($sqlCores)
$count = count($jmCores);
if($count > 0){
    foreach($jmCores as $row){
               $coresTamanho[] = array(
                'idT'   => $row['IDEstoques'],
                'coresT' => utf8_encode($row['Cores']),
         );
    }
    $coresTamanho['hasOptions'] = true;
}else{
    $coresTamanho['hasOptions'] = false;
}
echo (json_encode($coresTamanho));

and then treat that answer in jQuery:

(function(){
    $('#tamanhoProdutos').change(function(){
        if($(this).val()){
            $('#cores').show();
             $.getJSON('cores.php?search=',{idProduto: <?php echo $visualizar->IDProdutos; ?>, tamanho: $(this).val(), ajax: 'true'}, function(j){
                  if(j[i].hasOptions === true){
                      var options = '<div style="font-size: 18px;">Cores:</div><select name="Cores" class="form-control"><option value="selecione">Escolha a Cor</option>';
                      for (var i = 0; i < j.length; i++) {
                           options += '<option value="' + j[i].idT + '">' + j[i].coresT + '</option>';
                      }
                      options += '</select>';
                     $('#cores').html(options).show();
                     $('.carregando').hide();
                  }else{

                     $('.carregando').hide();
                  }
             })
        }
    })
});