Rellenar listas desplegables en cascada en JSP / Servlet

Luego de tanto batallar hemos dado con el resultado de este enigma que algunos lectores de nuestro sitio web han presentado. Si tienes algún detalle que aportar puedes compartir tu información.

Solución:

Básicamente, hay tres formas de lograrlo:

1. Envíe el formulario a un servlet durante el evento onchange del primer menú desplegable (puede usar Javascript para esto), deje que el servlet obtenga el elemento seleccionado del primer menú desplegable como parámetro de solicitud, deje que obtenga los valores asociados del segundo menú desplegable de la base de datos como un Map, deje que los almacene en el ámbito de la solicitud. Finalmente, deje que JSP / JSTL muestre los valores en el segundo menú desplegable. Puede usar JSTL (simplemente coloque jstl-1.2.jar en /WEB-INF/lib) c:forEach etiqueta para esto. Puede rellenar previamente la primera lista del doGet() método del Servlet asociado con la página JSP.

    
        
            $option.value
        
    
    
        
            Please select parent
        
        
            $option.value
        
    
    
        
            Please select parent
        
        
            $option.value
        
    
   

   Sin embargo, una vez se hace una advertencia, esto enviará el completo formar y provocar un “destello de contenido” que puede ser perjudicial para la experiencia del usuario. También deberá conservar los otros campos en el mismo formulario según los parámetros de la solicitud. También deberá determinar en el servlet si la solicitud es para actualizar un menú desplegable (el valor del menú desplegable secundario es null) o enviar el formulario actual.

2. Imprima todos los valores posibles del segundo y tercer menú desplegable como un objeto Javascript y utilice una función de Javascript para completar el segundo menú desplegable según el elemento seleccionado del primer menú desplegable durante el evento onchange del primer menú desplegable. Aquí no es necesario enviar ningún formulario ni ciclo de servidor.

    
   
    
        
            $option.value
        
    
    
        Please select parent
    
    
        Please select parent
    
   

   Sin embargo, una advertencia es que esto puede resultar innecesariamente largo y costoso cuando tiene mucho de artículos. Imagine que tiene 3 pasos de cada 100 elementos posibles, lo que significaría 100 * 100 * 100 = 1,000,000 elementos en objetos JS. La página HTML crecería más de 1 MB de longitud.

3. Haga uso de XMLHttpRequest en Javascript para disparar una solicitud asincrónica a un servlet durante el evento onchange del primer menú desplegable, deje que el servlet obtenga el elemento seleccionado del primer menú desplegable como parámetro de solicitud, deje que obtenga los valores asociados del segundo menú desplegable del base de datos, devuélvala como XML o JSON string. Finalmente, deje que Javascript muestre los valores en el segundo menú desplegable a través del árbol DOM de HTML (al modo Ajax, como se sugirió anteriormente). La mejor forma de hacerlo sería usar jQuery.

    <%@ page pageEncoding="UTF-8" %>
    <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
    
    
        
            
            
            
        
        
            
   
                
                    
                        $option.value
                    
                
                
                    Please select parent
                
                
                    Please select parent
                
            
        
    
   

   ..donde el Servlet detrás /json/options puede verse así:

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException 
        String dd = request.getParameter("dd"); // ID of child DD to fill options for.
        String val = request.getParameter("val"); // Value of parent DD to find associated child DD options for.
        Map options = optionDAO.find(dd, val);
        String json = new Gson().toJson(options);
        response.setContentType("application/json");
        response.setCharacterEncoding("UTF-8");
        response.getWriter().write(json);
    
   

   Aquí, Gson es Google Gson, que facilita la conversión de objetos Java completos a JSON y viceversa. Consulte también ¿Cómo utilizar Servlets y Ajax?

Es posible que necesite varios servlets para esto.

Servlet 1: cargue los valores de la primera lista desplegable de la base de datos. En la página JSP, construya la lista desplegable. Si el usuario selecciona un valor, envíe el servlet dos.

Servlet 2: recupere el valor de la primera lista y realice su búsqueda en la base de datos para los valores de la segunda lista. Construye la segunda lista. Cuando el usuario selecciona el segundo valor, envíelo al servlet 3.

Servlet 3: recupere el valor seleccionado en el segundo menú desplegable y realice la búsqueda en la base de datos para obtener los valores del último menú desplegable.

Es posible que desee considerar AJAX para que el llenado de las listas parezca perfecto para los usuarios. jQuery tiene algunos complementos muy buenos para hacer esto bastante fácil si está dispuesto a hacerlo.

---

     

          
               ....
          
     

Puede escribir JavaScript que envíe el formulario en el evento onchange. Nuevamente, si usa una biblioteca existente como jQuery, será 10 veces más simple.

A juzgar por su pregunta, en realidad no está utilizando un marco web, sino servlets para renderizar html.

Seré amable y diré que estás una década atrasado :), la gente usa JSP (y un marco web como struts) para este tipo de cosas. Sin embargo, habiendo dicho eso, aquí va:

1. Cree un campo oculto en su formulario y establezca el valor en ‘1’, ‘2’ o ‘3’ dependiendo de qué menú desplegable se completará;
2. En su servlet, capture este valor (request.getParamter ()) y utilícelo como una declaración ‘case’ / if / else para devolver los valores desplegables apropiados.

Lo diré de nuevo, solo use un marco web, o al menos un simple jsp antiguo para hacer esto.

Aquí puedes ver las reseñas y valoraciones de los usuarios

Te invitamos a añadir valor a nuestro contenido añadiendo tu experiencia en las notas.

---

---

Utiliza Nuestro Buscador