combobox en jsp

thyl · #1 (**permalink**) 30/06/2008, 12:58

Tengo dos combobox (<select>) en una pagina jsp una de ellas contiene una lista de paises y otra de ciudades. Quiero que ambas cargen las opciones de una base de datos en My SQL y que la segunda lista cargue a partir del pais que se indica en la primera. O sea si escojo Peru en la primera en la segunda aparezca Lima, Arequipa,etc. y si escojo Ecuador cambie sus opciones a Quito, Guayaquil,etc. El codigo que tengo carga la primera lista de la BD pero la segunda solo puedo hacerlo escribiendo las opciones en el codigo. Espero que alguien me pueda ayudar con el segundo combobox

Aqui va el codigo que tengo:

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>
<%@ page import="java.io.*,java.util.*,java.net.*,java.sql.*" %>

<html>
<head>
	<title>EJEMPLO</title>
</head>

<body>
<form name="doublecombo">
 <%
            Connection canal = null;
            ResultSet tabla= null;
            Statement instruccion=null;
            
            try {
                Class.forName("com.mysql.jdbc.Driver").newInstance();
                canal=DriverManager.getConnection("jdbc:mysql://localhost/contenedor","root","java");
                instruccion = canal.createStatement(ResultSet.TYPE_SCROLL_SENSITIVE,
                ResultSet.CONCUR_UPDATABLE);
            } catch(java.lang.ClassNotFoundException e){} catch(SQLException e) {};

            try {   
                tabla = instruccion.executeQuery("select RegionDescription from region");
            } catch(SQLException e) {};  

            out.println("Pais:<SELECT NAME=example onChange=redirect(this.options.selectedIndex)><OPTION> - Elejir
 Pais - </OPTION>");
            while(tabla.next()) {
                out.print("<OPTION>"+tabla.getString(1)+"</OPTION>");
            };
           
           out.print("</SELECT>");   
           tabla.close();instruccion.close();canal.close();
%>          
    
    
  
<select name="stage2" size="1">
<option value="">Escoja</option>
</select>

<script>
<!--

var groups=document.doublecombo.example.options.length
var group=new Array(groups)
for (i=0; i<groups; i++)
group[i]=new Array()

group[0][0]=new Option("Escoja","")

group[1][0]=new Option("Lima")
group[1][1]=new Option("Arequipa")
group[1][2]=new Option("Trujillo")

group[2][0]=new Option("Cali")
group[2][1]=new Option("Bogota")
group[2][2]=new Option("Barranquilla")
group[2][3]=new Option("Medellin")

group[3][0]=new Option("Guayaquil")
group[3][1]=new Option("Quito")

group[4][0]=new Option("La Paz")
group[4][1]=new Option("Santa Cruz")
group[4][2]=new Option("Cochabamba")

var temp=document.doublecombo.stage2

function redirect(x){
for (m=temp.options.length-1;m>0;m--)
temp.options[m]=null
for (i=0;i<group[x].length;i++){
temp.options[i]=new Option(group[x][i].text,group[x][i].value)
}
temp.options[0].selected=true
}
//-->
</script>

</form>

</body>
</html>

Saludos

Bunburyscom · #2 (**permalink**) 30/06/2008, 15:46

Es comun lo que pides, si tienes una amplia experiencia en desarrollar sistemas web puedes usar ajax.

Sino quieres meterte con tanto relajo, puedes poner en el atributo action de tu form el mismo nombre de tu pagina para que cuando le hagas Aceptar envies el Pais que seleccionaste en el primer combo y en base a ese valor hacer el query y que te traiga las localidades que pertenecen a ese pais:

Guayaquil,etc. El codigo que tengo carga la primera lista de la BD pero la segunda solo puedo hacerlo escribiendo las opciones en el codigo. Espero que alguien me pueda ayudar con el segundo combobox

Aqui va el codigo que tengo:

Código: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>
<%@ page import="java.io.*,java.util.*,java.net.*,java.sql. *" %>

<html>
<head>
<title>EJEMPLO</title>
</head>

<body>
<form name="doublecombo" action="nombrePagina.jsp">
<%

Connection canal = null;
ResultSet tabla= null;
Statement instruccion=null;

try {
Class.forName("com.mysql.jdbc.Driver").newInstance ();
canal=DriverManager.getConnection("jdbc:mysql://localhost/contenedor","root","java");
instruccion = canal.createStatement(ResultSet.TYPE_SCROLL_SENSIT IVE,
ResultSet.CONCUR_UPDATABLE);
} catch(java.lang.ClassNotFoundException e){} catch(SQLException e) {};

try {
tabla = instruccion.executeQuery("select RegionDescription from region");
} catch(SQLException e) {};

out.println("Pais:<SELECT NAME=example onChange=redirect(this.options.selectedIndex)><OPT ION> - Elejir
Pais - </OPTION>");
while(tabla.next()) {
out.print("<OPTION>"+tabla.getString(1)+"</OPTION>");
};

out.print("</SELECT>");
tabla.close();instruccion.close();canal.close();
%>

//Aqui llenas tu segundo combo
<%
String pais=request.getParameter("example");
String query="select RegionDescription from region";
if(pais!=null)
query+=" where pais="+pais;
Connection canal = null;
ResultSet tabla= null;
Statement instruccion=null;

try {
Class.forName("com.mysql.jdbc.Driver").newInstance ();
canal=DriverManager.getConnection("jdbc:mysql://localhost/contenedor","root","java");
instruccion = canal.createStatement(ResultSet.TYPE_SCROLL_SENSIT IVE,
ResultSet.CONCUR_UPDATABLE);
} catch(java.lang.ClassNotFoundException e){} catch(SQLException e) {};

try {
tabla = instruccion.executeQuery(query);
} catch(SQLException e) {};

out.println("Localidad:<SELECT NAME=localidad>");
while(tabla.next()) {
out.print("<OPTION>"+tabla.getString(1)+"</OPTION>");
};

out.print("</SELECT>");
tabla.close();instruccion.close();canal.close();
%>

</form>

</body>
</html>

No probe el codigo pero la idea ahi esta.

Haz varias pruebas hasta que salga y ahi nos avisas cualquier cosa

Saludos!!

ZiNd1 · #3 (**permalink**) 16/07/2008, 01:49

Hola yo quiero hacer lo mismo que tu, pero mi codigo es diferente, trabajo con MySql tambien; tengo una tabla pais que se llena con idpais y nombre del pais el Selectedindex del combobox es el mismo que el idpais ;iddpais=document.Registro.pais.Selectedindex; en este caso Registro sellama el form y pais el primer combo el segundo combo se llama ciudad. tengo un stored procedure que busca mediante el idpais el nombre de las ciudades. ;entonces lo que queria hacer es capturar mediante una funcion en javascript el Selectedindex en una variable y mandarla como parametro en mi stored procedure y llamrlo en el evento OnChange() del combo Pais. Lo que no se hacer es combinar mi funcion javascript con el codigo java para poder llenar mi combo ciudad. Aqui adjunto el codigo con la funcion sin terminar:

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@page contentType="text/html"%>
<%@page import ="java.util.*"%>
<%@page import ="edu.upc.webservlet.beans.*"%>

<jsp:useBean id="datosPais" scope="request" class="edu.upc.webservlet.jdbc.PaisDaoImpl" />
<jsp:useBean id="datosCiudad" scope="request" class="edu.upc.webservlet.jdbc.CiudadDaoImpl" />

<% Collection listado = (Collection) request.getAttribute("listado");%>
<% String opcion = (String) request.getAttribute("opcion");

List Lista = datosPais.getPaises();
PaisBean pais;

%>

<html>
<head>
<script type="text/javascript" src="Basketball Earth Storev2/Principal/FORMULARIOS/validacion_registro.js"></script>
<script language=javascript>

//esta es la funcion javascript que no se comp terminarla
function ObtenerCiudades()
{
var index = document.Registro.pais.Selectedindex;
<%
ArrayList Ciudades = new ArrayList();
String pais_id=request.getParameter("index");

List ListaCity = datosCiudad.getDatosCiudad();
CiudadBean ciudad;

for (int i = 0; i < ListaCity.size(); i++) {
ciudad = (CiudadBean) ListaCity.get(i);
Ciudades[i] = ciudad;

}
%>
}
</script>


<title>Registro de Usuarios</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="Basketball Earth Storev2/Principal/estilo tabla.css" rel="stylesheet" type="text/css" />
<link href="Basketball Earth Storev2/Principal/FORMULARIOS/estilo formulario.css" rel="stylesheet" type="text/css">
</head>

<body>

<Div>


<center>

<form action="/WebApplicationBD_Bestore/InsertarUsuarioServlet" name="Registro" id="Registro" method="POST" >
<table width="813" border="0" cellpadding="8" cellspacing="0" class="table_a">
<tr>
<td colspan="5" class="td_a" height="30">
<font color="black"><b>Formulario de Registro<b></font>
</td>
</tr>
<tr >
<td width="288" class="LabelColor" >
<label for="username">Usuario*</label><br> <br>
<input type="text" name="username" id="username" size="25">
</td>

<td colspan="2" rowspan="3" class="TitleColor2">
<img src="Basketball Earth Storev2/Principal/FORMULARIOS/Love-Basketball_1.jpg" height="250" width="210"> </td>

</tr>
<tr style="vertical-align: baseline">
<td style="text-align: left" class="LabelColor" width="288">
<label for="password">Password*</label><br> <br>
<input type="password" name="password" id="password" size="25"></td>
<td width="59" colspan="2" class="TitleColor"> </td>
</tr>
<tr style="vertical-align: baseline">
<td style="text-align: left" class="LabelColor">
<label for="confirmpassword">Confirme
Password*</label> <br> <br>
<input type="password" name="confirmapassword" id="confirmpassword" size="25">
</td>
<td colspan="2" class="TitleColor">
</td>
</tr>

<tr>
<td colspan="3" class="TitleColor">
<label for="first"><font color="black" size="2pt">&nbsp &nbsp &nbsp &nbsp &nbsp &nbsp Nombre Completo* </font></label>
<input type="text" id="first" name="nombres" size="50"> &nbsp

</td>
</tr>

//Aqui es donde llamaria en el OnChange(ObtenerCiudades())
<tr style="vertical-align: top">
<td style="text-align: left" class="LabelColor" colspan="2">
Pais*  
<select name="pais">
<%
for (int i = 0; i < Lista.size(); i++) {
pais = (PaisBean) Lista.get(i);
%>

<option value= "<%= pais.getIdPais() %>" > <%= pais.getNombrePais() %> </option>
<% } %>
</select>

&nbsp      
Ciudad*  <select name="ciudad" >

</select>
</td>

</tr>

<tr style="vertical-align: top" class="FooterColor">
<td colspan="3" align="right" class="LabelColor">
<input type="submit" name="Enviar" value="Enviar">
</td>
</tr>

</table>
</form>
</center>

</Div>
</body>
</html>