Выпадающие зависимости с Servlet и AJAX

Question

У меня есть 3 раскрывающихся списка. Первый снимок - это родительский, и я хочу заполнить 2-ую выпадающую таблицу, когда пользователь выбирает значение с 1-го, а затем заполняет 3-ю снизу на основе 2-го. Я использую сервлет для объявления значений. Вот код:

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); 
} 

Из этого сервлета. Я получаю значение 1-го падения, но, похоже, я не могу получить значение выбранного значения, которое будет использоваться для заполнения 2-го и 3-го.

+ 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? или сервлет?

Answer 1

пожалуйста найти эту ссылку, было бы много полезной Reference

Сценарий Вот что я мог предположить вас ,,

1.Onload страницы вы можете получить первое падение вниз, чтобы быть загружен

2.Обращение сначала записывает вызовы ajax, чтобы передать первое выпадающее значение в качестве входных данных в ajax-вызовах и добавить дополнительные опции выбора

3.On change of second write ajax calls для передачи второй капли вниз значение в качестве вклада в сервлет в Ajax вызовов и добавить третьи варианты выберите

Answer 2

Если значение первого ниспадающих изменений вы должны передать выбранное значение функции JQuery получить такие как это,

<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, и вы не заполнили свой второй снимок своим ответом. Вы пытались заполнить один и тот же параметр выбора без значений из сервлета. Вышеупомянутый код должен работать на вас. Удачи!

Обновление: Я только заметил, что вы попытались отправить запрос на jsp. Вы не должны перенаправлять свою страницу при выполнении вызовов AJAX, поскольку вы просто обновляете раскрывающийся список, а jquery заботится о получении ответа от сервлета и обновлении интерфейса. Удалите это из своего кода сервлета,

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