Real-time data filter using Jquery

Question

I am building a comment system and I would like when the user selects the value of a select field, a variable is sent to a PHP page with the selected value, and the same returns the results within a div.

<form>
    <div class="campo">
        <label>Ordenar por: </label>
        <select id="ordenar" name="ordenar">
            <option>Relevância</option>
            <option>Mais Recente</option>
        </select>
    </div>                  
    <div class="campo">
        <label>Comentários apenas de: </label>
        <select id="filtroComentarios" name="filtroComentarios">
            <option>Professores</option>
            <option>Estudantes</option>
        </select>
    </div> 
</form>

<div id="comentarios"> </div>
//Div que recebe os comentários filtrados

Answer 1

$('.campo select').on('change', function(){
  var valorSelecionado = $('.campo select').eq(0).val();
  var valorSelecionado2 = $('.campo select').eq(1).val();
  $.ajax({
    method: "POST",
    url: "pagina.php",
    data: {variavel: valorSelecionado, variavel2: valorSelecionado2} // variavel é o nome que você deve pegar no servidor.
  })
  .done(function( msg ) {
    $('#comentarios').text(msg);
    //ou $('#comentarios').html(msg);
  });
})

From here you just use $_POST in php to get the value, filter and give an echo or something like that on the server with the comments already formatted.