ComboBox com Select Dinamico para troca de paginas + Jquery

Estou tendo um problema no desenvolvimento de uma galeria de fotos, que estou desenvolvendo em JSP + Servlet sem nenhum framework:

Minha galeria esta dividida por CATEGORIAS ----> GALERIAS ---> FOTOS, entao criei uma unica tela com as respectivas areas para serem preenchidas atraves de requisições com AJAX. A logica é que, as categorias fiquem em um pequeno combobox acima da pagina, e que seja preenchida dinamicamente com as opcoes, ate aí eu ja consegui, ele popula perfeitamente o combo. O problema, é que eu nao consigo passar o ID da categoria por AJAX para chamar a requisição seguinte, com o conteudo da Galeria apropriada.

Eis os codigos:

AJAX.JS

/* MAPEAMENTO DE ACOES E LINKS PARA REQUISICAO AJAX NA PAGINA PRINCIPAL */

$(document).ready(function() {
    $('#categoria select').css('opacity', .85);
    $('#categoria select option').css('opacity', .85);

    var galeria = $('#galerias');
    var fotos = $('#fotos');
    var carregandoGalerias = $('#carregandoGalerias');

    carregandoGalerias.hide();

    function showCarregandoGalerias() {
        galeria.fadeOut(1);
        carregandoGalerias.fadeIn(200);
    }

    function aposCarregandoGalerias() {
       carregandoGalerias.fadeOut(200);
       galeria.fadeIn(200);
    }


    //funcao para tratar eventos do select

    $("select#listaCategorias").change(function() {
       showCarregandoGalerias();
       galeria.load('categoria?id=Categoria', aposCarregandoGalerias);
    });

 });

GALERIA.JSP

<%@page contentType="text/html" pageEncoding="ISO-8859-1"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<jsp:useBean id="getCategorias" class="java.util.ArrayList" scope="request" />
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
        <link href="css/estilo.css" rel="stylesheet" media="all">
        <script src="js/jquery.js" type="text/javascript"></script>
        <script src="js/ajax.js" type="text/javascript"></script>
        <title></title>
    </head>
    <body>
        <div id="topo">
            <h1>Galeria de Fotos da</h1>
            <h1>${nomeCamara}</h1>
            <form id="categoria">
                <select id="listaCategorias">
                <option selected>Selecione o Grupo</option>
                    <c:forEach items="${getCategorias}" var="categoria">
                        <c:set var="idCategoria" value="categoria.id" scope="request" />
                        <option name="${categoria.id}" class="cat"> ${categoria.titulo}</option>
                    </c:forEach>
                </select>
            </form>
        </div>

        <div id="galerias">

        </div>

        <div id="carregandoGalerias" align="center">
            <img src="images/carregando.gif" id="carregando" />
        </div>

        <div id="fotos">
            Fotos
        </div>

        <div id="rodape">
            Rodape
        </div>
    </body>
</html>

Topicos relacionados