Tema: Combos dependientes en JSP
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 24/03/2015, 07:47
Avatar de oshho
oshho
 
Fecha de Ingreso: marzo-2015
Mensajes: 40
Antigüedad: 10 años, 7 meses
Puntos: 0
Combos dependientes en JSP
Buenas a todos, espero que esten teniendo un buen día y sin aburrirlos más voy directo al grano, resulta que estoy haciendo una aplicación web con JSP, dentro de esta aplicación tengo 2 combobox, 1 combobox carga una lista desde una base de datos, y el segundo combobox debería hacer lo mismo, pero basado en la selección del primer combobox. (Un ejemplo muy común de esto es clasico par de combos "País" y "Ciudad" en el que el segundo solo cargaría las ciudades del país seleccionado)

Bueno a continuación le dejo le codigo de mi JSP, he buscado mucho y bueno he encontrado muchos tutoriales en el que usan Javascript, y apesar de seguirlos al pie de la letra nunca me resulta (Cabe aclarar que jamás en mi vida e usado javascript) otros proponen el uso de AJAX pero nisiquiera se implementarlo ahaha, bueno, les dejo mi codigo para ver si me pueden brindar su ayuda n,n

Código Java: 
Ver original
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5.         <title>Eliminar Métricas</title>
  6.     </head>
  7.     <body>
  8.         <form name="frmEliminar" method="POST" id="frm_del">
  9.             <table style=" border: 0px; font-family: Verdana; background-color: gainsboro;
  10.                    font-size: 12px; text-align: left; box-shadow: black 0px 1px 10px 0px">
  11.                 <tbody>
  12.                     <tr>
  13.                         <td>Nombre de Aplicación</td>
  14.                         <td><select style="width: 317px" id="cmbAN" name="cmbApplicationName">
  15.                                 <option value="">--Seleccione--</option>
  16.                         <!-- Carga el combobox/drop-down list con las posibles aplicaciones -->
  17.                                 <%for(Application appl: new dao.ApplicationDao().listarAplicaciones()){%>
  18.                                 <option value="<%= appl.getIdApplication() %>"><%= appl.getNameApplication()%></option>
  19.                                 <% } %>
  20.                             </select>
  21.                         </td>
  22.                     </tr>
  23.                     <tr>                      
  24. // HASTA AQUÍ NO TENGO PROBLEMAS, PERO NECESITO CARGAR LA INFO DE ESTE COMBO, BASANDOSE EN LA SELECCIÓN DEL COMBO ANTERIOR
  25.                         <td>Nombre de Transacción</td>
  26.                             <td><select  id="cmbTN" name="cmbTransactionName">
  27.                                 <option value="">--Seleccione--</option>
  28.                                 <option value=""></option>
  29.                             </select></td>
  30.                     </tr>
  31.                 </tbody>
  32.             </table>
  33.             <br>
  34.             <input type="submit" value="BUSCAR" name="btnBuscar" /> <input type="submit" value="ELIMINAR" name="btnEliminar" />
  35.         </form>
  36.     </body>
  37. <html>

Este es el codigo de mi clase ApplicationDao (La cual contiene la query)
Código Java: 
Ver original
  1. // Crea y devuelve una lista (ArrayList) con la ID y nombre de las aplicaciones.
  2.     public static ArrayList<Application> listarAplicaciones(){
  3.         ArrayList<Application> aplicaciones = new ArrayList<Application>();
  4.         Connection conexion = Conexion.getConexion();
  5.         try {
  6.             String query = " USE SyntheticMonitoring "
  7.                     + "SELECT ApplicationID, ApplicationName "
  8.                     + "FROM Applications";
  9.             PreparedStatement listar = conexion.prepareStatement(query);
  10.             ResultSet rs = listar.executeQuery();
  11.             while(rs.next()){
  12.                 Application aplicacion = new Application();
  13.                 aplicacion.setIdApplication(rs.getInt("ApplicationID"));
  14.                 aplicacion.setNameApplication(rs.getString("ApplicationName"));
  15.                 aplicaciones.add(aplicacion);
  16.             }
  17.             
  18.        } catch (SQLException ex) {
  19.             out.println("<!DOCTYPE html>");
  20.             out.println("<html>");
  21.             out.println("<head>");
  22.             out.println("<title>Error Exception</title>");            
  23.             out.println("</head>");
  24.             out.println("<body>");
  25.             out.println("<h1>SQLException "+ ex +"</h1>");
  26.             out.println("</body>");
  27.             out.println("</html>");
  28.         } catch (Exception ex) {
  29.             out.println("<!DOCTYPE html>");
  30.             out.println("<html>");
  31.             out.println("<head>");
  32.             out.println("<title>Error Exception</title>");            
  33.             out.println("</head>");
  34.             out.println("<body>");
  35.             out.println("<h1>Exception "+ ex +"</h1>");
  36.             out.println("</body>");
  37.             out.println("</html>");
  38.         }
  39.         return aplicaciones;
  40.     }


Esta es la clase TransactionDao donde tengo la query de las transacciones (La que pide la ID de aplicación como parametro) *Nota: no se si debería tener este metodo como "estatico" aunque no se si esto afecta negativamente la carga del cmb"

Código Java: 
Ver original
  1. public static ArrayList<Transaction> listarTransacciones(int appID){
  2.         ArrayList<Transaction> trans = new ArrayList<Transaction>();
  3.         Connection conexion = Conexion.getConexion();
  4.         try {
  5.             String query = " USE SyntheticMonitoring "
  6.                     + "SELECT TransactionID, TransactionName "
  7.                     + "FROM Transactions "
  8.                     + "WHERE ApplicationID = ?";
  9.             PreparedStatement listar = conexion.prepareStatement(query);
  10.             listar.setInt(1, appID);
  11.             ResultSet rs = listar.executeQuery();
  12.             while(rs.next()){
  13.                 Transaction transaccion = new Transaction();
  14.                 transaccion.setIdTransaction(rs.getInt("TransactionID"));
  15.                 transaccion.setNameTransaction(rs.getString("TransactionName"));
  16.                 trans.add(transaccion);
  17.                 
  18.             }
  19.             
  20.        } catch (SQLException ex) {
  21.             out.println("<!DOCTYPE html>");
  22.             out.println("<html>");
  23.             out.println("<head>");
  24.             out.println("<title>Error Exception</title>");            
  25.             out.println("</head>");
  26.             out.println("<body>");
  27.             out.println("<h1>SQLException "+ ex +"</h1>");
  28.             out.println("</body>");
  29.             out.println("</html>");
  30.         } catch (Exception ex) {
  31.             out.println("<!DOCTYPE html>");
  32.             out.println("<html>");
  33.             out.println("<head>");
  34.             out.println("<title>Error Exception</title>");            
  35.             out.println("</head>");
  36.             out.println("<body>");
  37.             out.println("<h1>Exception "+ ex +"</h1>");
  38.             out.println("</body>");
  39.             out.println("</html>");
  40.         }
  41.         return trans;
  42.     }

Aquí una fotito de lo que quiero hacer hahaha ( Explicado con manzanas ahhaha )
No es necesario hacer exactamente lo que tenía planeado con el Onchange, pero si obtener el mismo resultado :c


Bueno chicos, espero que puedan ayudarme con esto, ya que no soy muy experto en el tema, agradecería cualquier ayuda, muchas gracias n-n
Última edición por oshho; 24/03/2015 a las 08:04