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