Select carregando conteudo na div com Ajax e php

Olá amigos, blz?!

Estou com um problema, eu não estou conseguindo carregar o resultado de uma consulta sql na div da pagina. Tenho um select com as categorias dos produtos, esse select tem que listar todos os produtos pertencentes a tal categoria. Estou tentando fazer via Ajax passando o id da categoria para outra pagina php e recebendo o resultado para listar os produtos. No meu código está retornado nada na div e sem o conteúdo requisitado.

...pagina html

 <label><?= trans('categoria') ?></label>
 <select id="cat" name="cat" class="form-control">

 <?php foreach ($c as $categorias) : ?>
 <option value="<?= $categorias['cat_id'] ?>">
 <?= $categorias['nome'] ?>
 </option>
 <?php endforeach; ?>

 </select>

 <div id="resultado"></div>

$(document).ready(function(){
 $(document).on('change', 'select', function(){
 var id_cat = $(this).val();
 $.ajax({
 type: 'POST',
 url: "pagina.php",
 data: {idCat : id_cat },
 cache: false,
 dataType : 'html',
 success: function(retorno)
 {
 $('#resultado').html(retorno);
 },
	})
 });
});

<?php
include "dfdfgdgd.php";

 private $db = null;
 public $errors = array();
 public $messages = array();

 public function __construct()
 {
 if(isset($_POST['idCat'])) {
 $this->list_prod();
 }
 }

///////////funcao ///////////////

	private function list_prod()
 {

 $retorno = "";

 $cat_id = $_POST['idCat'];

 $result = app('db')->select(
 'SELECT * FROM `produtos` WHERE `categoria` = :id',
 array('id' => $cat_id)
 );

 foreach ($result as $produtos) :

 $retorno .= "<div>nome: ".$produtos['nome'] ."</div><br />";
 $retorno .= "<div>R$ ".$produtos['preco'] ."</div>";

 endforeach;

 echo $retorno;
	}
}