0

我有一个 3 下拉列表。第一个下拉列表是父级，当用户从第一个下拉列表中选择一个值时，我想填充第二个下拉列表，然后根据第二个下拉列表填充第三个下拉列表。我正在使用 servlet 来声明这些值。这是代码：

小服务程序：

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    TblBIRFormNoDAO birdao = DAOFactory.getDaoManager(TblBIRFormNo.class);
    List<TblBIRFormNo> birtypelist = birdao.getAllBirFormNumber();
    request.setAttribute("birtypelist", birtypelist);

    String bir = request.getParameter("bfnsCode");
    TblTaxTypeDAO taxdao = DAOFactory.getDaoManager(TblTaxType.class);
    if(bir != null){
        List<TblTaxType> taxtypelist = taxdao.findAlltaxtCode(bir);
        String json = null;
    json = new Gson().toJson(taxtypelist);

    response.setContentType("application/json");
    response.setCharacterEncoding("UTF-8");
    response.getWriter().write(json);
    }

    String tax = request.getParameter("taxtCode");
    TblTaxTypeDAO tdao = DAOFactory.getDaoManager(TblTaxType.class);
    if(tax != null){
        List<TblTaxType> taxdesclist = tdao.findAlltaxtDesc (tax);
        String json = null;
        json = new Gson().toJson(taxdesclist);

    response.setContentType("application/json");
    response.setCharacterEncoding("UTF-8");
    response.getWriter().write(json);
    }

    request.getRequestDispatcher("/servlet-test.jsp").forward(request, response);
}

从这个 servlet。我得到了第一个下拉列表的值，但似乎我无法获得将用于填充第二个和第三个的选定值的值。

jsp + AJAX：

        <script type="text/javascript">
    $(document).ready(function() {                                        
        $('#bfnsCode').change(function() {                               
            $.get('Test', function(responseJson) {                 
                var $select = $('#bfnsCode');                           
                $select.find('option').remove();                         
                $.each(responseJson, function(key, value) {              
                    $('<option>').val(key).text(value).appendTo($select);
                });
            });
        });
    });
</script>


                <label style="font-size: 17px;">BIR-Form Number</label><br>         
                <select name="bfnsCode" id="bfnsCode" class="sel" style="width: 245px; margin-left: 0;">
                    <option selected="selected" value=""></option>
                    <c:forEach var="bircode" items="${birtypelist}">
                         <option value="${bircode.bfnsCode}">${bircode.bfnsCode}</option>                            
                    </c:forEach>
                </select>
                <br><br>

                <label style="font-size: 17px;">Tax Type</label><br>            
                <select name="taxtCode" id="taxtCode" class="sel" style="width: 245px; margin-left: 0;">
                    <option selected="selected" value=""></option>
                    <c:forEach var="taxtype" items="${taxtypelist}">
                         <option value=""></option>                              
                    </c:forEach>                                    
                </select>
                <br><br>

                <label style="font-size: 17px;">Account Code</label><br>    
                <select name="taxtDesc" id="taxtDesc" class="sel" style="width: 245px; margin-left: 0;">
                    <option selected="selected" value=""></option>
                    <c:forEach var="taxdesc" items="${taxdesclist}">
                         <option value="${taxdesc.taxtDesc}">${taxdesc.taxtDesc}</option>                            
                    </c:forEach>                                    
                </select>

这部分，唯一显示的值是第一个下拉列表。AJAX 缺少哪些代码？还是servlet？

4

2 回答 2

0

请找到这个参考，它会很有帮助参考

我可以建议你的场景是,,

1.页面的加载，您可能会得到第一个要加载的下拉菜单

2.Onchange首先编写ajax调用以将第一个下拉值作为ajax调用中的输入传递并附加第二个选择选项

3.在更改第二次写入 ajax 调用以将第二个下拉值作为输入传递给 ajax 调用中的 servlet 并附加第三个选择选项

于 2013-08-17T11:48:35.207 回答
0

当第一个下拉列表的值发生变化时，您必须将所选值传递给 jquery get 函数，例如，

<script type="text/javascript">
$(document).ready(function() {                                        
    $('#bfnsCode').change(function() {  
        var $bfnscode=$("select#bfnsCode").val();                               
        $.get('Test',{bfnsCode:$bfnscode},function(responseJson) {                                                          
           var $select = $('#taxtCode');                           
           $select.find('option').remove();                  
            $.each(responseJson, function(key, value) {              
                $('<option>').val(key).text(value).appendTo($select);
            });
        });
    });
});

您从未将参数传递给您的 get 函数，也没有使用您的响应填充第二个下拉列表。您试图填充相同的选择选项，但没有来自 servlet 的值。上面的代码应该适合你。祝你好运！

更新：我刚刚注意到您已尝试将请求转发给 jsp。进行 AJAX 调用时不应重定向页面，因为您只是更新下拉列表，而 jquery 负责从 servlet 获取响应并更新接口。从您的 servlet 代码中删除它，

request.getRequestDispatcher("/servlet-test.jsp").forward(request, response);//remove this line
于 2013-09-05T19:37:50.370 回答