Carregar vários campos com jQuery

Boa tarde pessoal.

Estou tentando usar jQuery no meu projeto, e tem umas coisas que eu não entendi, talvez possam me ajudar.
Eu tenho dois comboBox no meu formulário, um com a descrição do produto e o outro com o código do produto. (tabela produto no banco de dados)
Tenho um textArea que mostra todos os produtos que utilizam o produto selecionado no combo descrição ou no combo código. (tabela produto_composicao).
O textArea eu consegui carregar com os dados que eu preciso, tanto quando o combo descrição é alterado quanto o campo codigo é alterado, mas não entendi as linhas

success : function (data) {
                            $('#contentArea').html(data);

Além de precisar entender o que esta linhas acima fazem, (por dedução eu acredito que é o out.printl() do jsp que faz isso), eu preciso fazem com que os dois comboBox sejam tambem dependentes um do outro. Se eu alterar o combo descricao do produto o sistema carrega o combo codigo e o texArea, se eu alterar o combo código o sistema carrega o combo descricao e o texArea.
Segue abaixo os códigos como estão hoje.

script usando a jQuery

$(document).ready(function() {
                $('#descproduto').change(function() {
                    $.ajax({
                        url : "carregaProdutoComposicao.jsp?produto="+$('#descproduto').val(),
                        beforeSend: function() {
                            $('#contentArea').html('Carregando...');
                        },
                        success : function (data) {
                            $('#contentArea').html(data);
                        }
                    });
                });               
                $('#codproduto').change(function() {
                    $.ajax({
                        url : "carregaProdutoComposicao.jsp?produto="+$('#codproduto').val(),
                        beforeSend: function() {
                            $('#contentArea').html('Carregando...');
                        },
                        success : function (data) {
                            $('#contentArea').html(data);
                        }
                    });
                });
            });

codigo html dentro do jsp

<tr>
                                    <td>Descrição do produto</td>
                                    <td><select id="descproduto" name="descricaoProduto"  size="1">
                                            <%--Options com os descrição dos produtos--%>
                                        </select></td>
                                    <td></td>
                                </tr>
                                <tr>
                                    <td>Código do produto</td>
                                    <td><select id="codproduto" name="codigoProduto"  size="1">
                                            <%--Options com os códigos dos produtos--%>
                                        </select></td>
                                    <td></td>
                                </tr>
                                <tr>
                                    <td>Produto utilizado em</td>
                                    <td><textarea id="contentArea" name="produtoUsadoEm" rows="4"  cols="20" readonly >
                                            <%--Descrição dos produtos que utilizam o produto selecionado em codproduto ou descproduto --%>
                                        </textarea></td>
                                    <td></td>
                                </tr>

Codigo carregaProdutoComposicao.jsp

<%
            String idProduto = (String) request.getParameter("produto");
            List<Produto> lista = ProdutoComposicaoSearch.getProdutoPai(new Integer(idProduto));
            out.clear();
            for (int idx = 0; idx < lista.size(); idx++) {
                out.println(lista.get(idx).getDescricao());// essa linha é a variavel data do javascript 'success : function (data)'?
            }
%>

Se alguém puder me ajudar eu agradeço.

Abraços.

Topicos relacionados