Question

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

的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？

Answer 1

请找到这个参考资料，这将非常有用Reference

我可以暗示你的情景是，

1.加载页面，您可以获得第一个下载加载

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

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

Answer 2

当第一个下拉列表的值发生更改时，您必须将所选值传递给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中没有值填充相同的select选项。上面的代码应该适合你。祝你好运！

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

request.getRequestDispatcher("/servlet-test.jsp").forward(request, response);//remove this line

使用Servlet和AJAX删除依赖关系

2 个答案: