Show data from DB as you select a select option

Question

I have a system where the user will register the information as follows:

I need the user to select one of the grids (Grades), to show only the information related to the selected grid. This information comes from the database.

The HTML code:

<table width="100%" >
    <tr class="linhas">
    <td>
    <table class="table table-bordered">
    <tr>
            <td style="text-align: center; background-color: #367FA9; color: #FFF; font-weight: bold">Código de cores</td>
            <td style="text-align: center; background-color: #367FA9; color: #FFF; font-weight: bold">Cor Básica</td>
            <td style="text-align: center; background-color: #367FA9; color: #FFF; font-weight: bold">Grades</td>
        </tr>
    <tr>
        <td style="text-align: center; width: 40%"><input type="text" class="form-control" placeholder="Referência"></td>
        <td style="text-align: center; width: 30%">
        <select name="CoresBasicas" class="form-control">
        <?php echo $metodos->comboCores($key); ?>
        </select>       
        </td>
        <td style="text-align: left;">
            <select name="Grade" class="form-control" style="width: 100%">
            <?php echo $metodos->comboGrades(); ?>
            </select>
        </td>
        </tr>
        <tr>
        <td colspan="3">
        <table class="table table-bordered">
        <tr>
        <td style="text-align: center; background-color: #367FA9; color: #FFF; font-weight: bold">Tamanho</td>
        <td style="text-align: center; background-color: #367FA9; color: #FFF; font-weight: bold">Quantidade</td>
        <td style="text-align: center; background-color: #367FA9; color: #FFF; font-weight: bold">EAN</td>
        </tr>
        <?php echo $metodos->listarTamanhos(); ?>
        </table>        
    </td>
    </tr>
    <tr>
    <td colspan="3" class="text-left">    
    <label for='files' class="upload">Selecionar fotos <i class="fa fa-plus-circle fa-lg" aria-hidden="true"></i></label>
    <input id='files' type='file' name="Fotos[]" multiple>
    </td>
</table>
    </td>
<td  style="padding: 5px"><button type="button" class="removerCampo btn btn-danger" title="Remover linha"><i class="fa fa-minus-square" aria-hidden="true"></i> Remover</button></td>
</tr>              
<tr><td colspan="3" class="text-right">
<button type="button" class="adicionarCampo btn btn-success" title="Adicionar item"><i class="fa fa-plus-square" aria-hidden="true"></i> Incluir nova cor</button>
</div>

</td></tr>
</table>

The PHP code for the grid method:

public function comboGrades($key)
    {
        $sqlMostrar = mysqli_query($this->conexao, "SELECT * FROM loja_grades;");
        if (mysqli_num_rows($sqlMostrar) == 0) 
        {
            $mostrar = "<div style='color: red'>Nenhuma grade cadastrado até o momento.</div>";
        } 
         else 
        {
            $mostrar = "<select name='Classes' class='form-control select2' multiple=\"multiple\" style='width: 35%'>";
            $mostrar = "<option value=''>Selecione a grade</option>";
            while ($jmMostrar = mysqli_fetch_object($sqlMostrar)) 
            {
                //$selected = ($key == $jmMostrar->IDCategorias)?("selected"):(null);
                $mostrar .= "<option value='".$jmMostrar->IdGrades."' ".$selected.">".$jmMostrar->Grades."</option>";
            }
         $mostrar .= "</select>";   
        }
        return $mostrar;
    }

The Jquery code I have is this:

<script type="text/javascript">
$(function () {
  function removeCampo() {
    $(".removerCampo").unbind("click");
    $(".removerCampo").bind("click", function () {
       if($("tr.linhas").length > 1){
        $(this).parent().parent().remove();
       }
    });
  }

  $(".adicionarCampo").click(function () {
    novoCampo = $("tr.linhas:first").clone();
    //novoCampo.find("input").val("");
    novoCampo.find('input[type="text"]').val("");
    novoCampo.find('select').val("");
    //novoCampo.find('input[type="radio"]').prop('selected', false);
    novoCampo.insertAfter("tr.linhas:last");
    removeCampo();
  });
});
</script>

Sorry about my English.

So,when user will select any option from any of the `three dropdown` you need to show the info related to that option value in below div ? am i right or i missunderstood something ? — Swati, Jun 23 '20 at 13:49
You can use onchange event here.i.e : on change of your select-box ,passed the value of option to your php using ajax and then perform your `select` query to get required values and then use `echo "..yourresult..` to send back values to ajax as response .Here is an [example](https://stackoverflow.com/questions/21484270/jquery-ajax-get-database-results-using-php-json-encode) — Swati, Jun 23 '20 at 14:05
Hello, Swati. I accessed the link and helped me. Thank you very much. Greetings from Brazil and sorry my English. — , Jun 23 '20 at 19:31

score 0 · Answer 1 · answered Jul 06 '20 at 00:09

I managed to solve it from a Spanish colleague.

$(document).on('change', '.grades', function() {
  var sel = $(this);
  $.ajax({
    type:'post',
    dataType: 'json',
    url: 'visualizar.php?v=' + sel.find('option:selected').val(),
    success: function(dados) {
      for(var i = 0; dados.length > i; i++) {
        sel.closest('TR').next().find('.mostrarGrades').html(dados[i]);          
      }
    }
  });
});

Show data from DB as you select a select option

1 Answers1