Mostrar consulta mysql en tiempo de ejecución

[xfxstudios]

con ajax para que realice una consulta y te regrese la respuesta sin regacgar, te doy una idea:

el codigo js que ejecuta la consulta:

Código Javascript:

$(document).ready(function(){
   $("#area").change(function () {
       
           $("#area option:selected").each(function () {
            id_category = $(this).val();
            $.post("subcat.php", { id_category: id_category }, function(data){
                $("#puesto").html(data);
            });            
        });
   })
});
 

el select:

Código HTML:

<select name="prueba" id="area">
<option value="primero">Primero</option>
<option value="segundo">Segundo</option>
</select>
 
 
<!--este div es en el que van a cambiar la opciones dependioendo de tu seleccion-->
<select name="prueba" id="puesto">
<option selected>Seleccione Area</option>
</select>
 

el php:

Código PHP:

$area = $_POST['id_category'];
 
$puestos = $db->query("select puesto from tabla WHERE area = '$area' ORDER BY puesto ASC");
$total_puestos = mysqli_num_rows($puestos);
 
if($total_puestos >=1){
    while($row = $puestos->fetch_assoc()){
        $html .= "<option value='".$row['puesto']."'>".$row['puesto']."</option>";
    }
}
echo $html;
 

listo asi cuando selecciones una opcion en el primero select se cargan las que correspondan den el segundo