select dependientes o anidados de 3 niveles
Publicado por alexander (1 intervención) el 10/07/2023 17:04:43
crear un formulario en JSP que permita seleccionar estado, municipio y parroquia. Los campos de estado, municipio y parroquia estarán anidados o dependerán jerárquicamente uno de otros.
Los campos de estado, municipio y parroquia estarán anidados, lo que significa que el valor seleccionado en el campo de estado afectará los valores disponibles en el campo de municipio, y el valor seleccionado en el campo de municipio afectará los valores disponibles en el campo de parroquia. Los datos ingresados en el formulario se guardarán en una tabla de una base de datos mysql, que contiene todas las tablas de este proyecto Java Web llamado "ac".
Al ejecutar la aplicacion, funciona bien el selector de estado, al seleccionar el estado se activa el selector de municipios correspondiente a ese estado, pero luego al seleccionar el municipio no activa las parroquias correspondientes al municipio en el selector de parroquia. EN ESTE CASO NECESITO AYUDA PARA QUE EL CODIGO FUNCIONE TOTALMENTE BIEN.
codigo del archivo index.jsp
<%--
Document : index
Created on : 9 jul. 2023, 7:44:31 p. m.
Author : alex2
--%>
<%@page import="conexion.conexion"%>
<%@ page import="java.sql.*" %>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
</head>
<body>
<%
Connection con = conexion.obtenerConexion();
%>
<h1>Alexander Carrasquel</h1>
<form>
<select id="estado" name="estado" onchange="cargarMunicipios()">
<option value="">Seleccione un estado</option>
<%
Statement stmt = con.createStatement();
ResultSet rs = stmt.executeQuery("SELECT * FROM estado");
while (rs.next()) {
%>
<option value="<%=rs.getString("Codestado")%>"><%=rs.getString("Estado")%></option>
<%
}
rs.close();
stmt.close();
%>
</select>
<select id="municipio" name="municipio" onchange="cargarParroquias()">
<option value="">Seleccione un municipio</option>
</select>
<select id="parroquia" name="parroquia">
<option value="">Seleccione una parroquia</option>
</select>
</form>
<script>
function cargarMunicipios() {
var estado = document.getElementById("estado").value;
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState === 4 && this.status === 200) {
document.getElementById("municipio").innerHTML = this.responseText;
document.getElementById("parroquia").innerHTML = "<option value=''>Seleccione una parroquia</option>";
}
};
xmlhttp.open("GET", "municipio.jsp?estado=" + estado, true);
xmlhttp.send();
}
function cargarParroquias() {
var estado = document.getElementById("estado").value;
var municipio = document.getElementById("municipio").value;
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState === 4 && this.status === 200) {
document.getElementById("parroquia").innerHTML = this.responseText;
}
};
xmlhttp.open("GET", "parroquia.jsp?estado=" + estado + "&municipio=" + municipio, true);
xmlhttp.send();
}
</script>
</body>
</html>
codigo archivo municipio.jsp
<%--
Document : municipio
Created on : 9 jul. 2023, 8:00:36 p. m.
Author : alex2
--%>
<%@page import="conexion.conexion"%>
<%@ page import="java.sql.*" %>
<%
String estado = request.getParameter("estado");
Connection con = conexion.obtenerConexion();
Statement stmt = con.createStatement();
ResultSet rs = stmt.executeQuery("SELECT * FROM municipio WHERE Codestado='" + estado + "'");
while (rs.next()) {
%>
<option value="<%=rs.getString("Codmunicipio")%>"><%=rs.getString("Municipio")%></option>
<%
}
rs.close();
stmt.close();
%>
codigo archivo parroquia.jsp
<%--
Document : parroquia
Created on : 9 jul. 2023, 8:00:36 p. m.
Author : alex2
--%>
<%@page import="conexion.conexion"%>
<%@ page import="java.sql.*" %>
<%
String estado = request.getParameter("estado");
String municipio = request.getParameter("municipio");
Connection con = conexion.obtenerConexion();
Statement stmt = con.createStatement();
ResultSet rs = stmt.executeQuery("SELECT * FROM parroquia WHERE Codestado='" + estado + "' AND Codmunicipio='" + municipio + "'");
while (rs.next()) {
%>
<option value="<%=rs.getString("Codparroquia")%>"><%=rs.getString("Parroquia")%></option>
<%
}
rs.close();
stmt.close();
%>
codigo para conexion a la base de datos coenxion.java
package conexion;
/**
*
* @author alex2
*/
import java.sql.Connection;
import java.sql.DriverManager;
public class conexion {
public static void main(String[] args) {
obtenerConexion();
}
// Método que se encarga de cargar el driver de MySQL
private static void conectar() {
Connection con = null;
String Driver="com.mysql.jdbc.Driver";
try {
Class.forName(Driver);
System.out.println("Driver cargado con exito");
}
catch (Exception e) {
System.out.println("Ha ocurrido un error al cargar el Driver"+ e.getMessage());
}
}
// Método que se encarga de obtener la conexión con la base de datos
public static Connection obtenerConexion() {
Connection con = null;
try {
conectar();
// Se establece la conexión con la base de datos
con = DriverManager.getConnection("jdbc:mysql://localhost:3306/alex?useUnicode=true&useJDBCCompliantTimezoneShift=true&useLegacyDatetimeCode=false&serverTimezone=UTC&useUnicode=true&characterEncoding=UTF-8", "root", "12569655");
System.out.println("Se ha establecido la conexión");
} catch (Exception e) {
System.out.println("Ha ocurrido un error al obtener la conexión"+ e.getMessage());
}
return con;
}
}
Los campos de estado, municipio y parroquia estarán anidados, lo que significa que el valor seleccionado en el campo de estado afectará los valores disponibles en el campo de municipio, y el valor seleccionado en el campo de municipio afectará los valores disponibles en el campo de parroquia. Los datos ingresados en el formulario se guardarán en una tabla de una base de datos mysql, que contiene todas las tablas de este proyecto Java Web llamado "ac".
Al ejecutar la aplicacion, funciona bien el selector de estado, al seleccionar el estado se activa el selector de municipios correspondiente a ese estado, pero luego al seleccionar el municipio no activa las parroquias correspondientes al municipio en el selector de parroquia. EN ESTE CASO NECESITO AYUDA PARA QUE EL CODIGO FUNCIONE TOTALMENTE BIEN.
codigo del archivo index.jsp
<%--
Document : index
Created on : 9 jul. 2023, 7:44:31 p. m.
Author : alex2
--%>
<%@page import="conexion.conexion"%>
<%@ page import="java.sql.*" %>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
</head>
<body>
<%
Connection con = conexion.obtenerConexion();
%>
<h1>Alexander Carrasquel</h1>
<form>
<select id="estado" name="estado" onchange="cargarMunicipios()">
<option value="">Seleccione un estado</option>
<%
Statement stmt = con.createStatement();
ResultSet rs = stmt.executeQuery("SELECT * FROM estado");
while (rs.next()) {
%>
<option value="<%=rs.getString("Codestado")%>"><%=rs.getString("Estado")%></option>
<%
}
rs.close();
stmt.close();
%>
</select>
<select id="municipio" name="municipio" onchange="cargarParroquias()">
<option value="">Seleccione un municipio</option>
</select>
<select id="parroquia" name="parroquia">
<option value="">Seleccione una parroquia</option>
</select>
</form>
<script>
function cargarMunicipios() {
var estado = document.getElementById("estado").value;
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState === 4 && this.status === 200) {
document.getElementById("municipio").innerHTML = this.responseText;
document.getElementById("parroquia").innerHTML = "<option value=''>Seleccione una parroquia</option>";
}
};
xmlhttp.open("GET", "municipio.jsp?estado=" + estado, true);
xmlhttp.send();
}
function cargarParroquias() {
var estado = document.getElementById("estado").value;
var municipio = document.getElementById("municipio").value;
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState === 4 && this.status === 200) {
document.getElementById("parroquia").innerHTML = this.responseText;
}
};
xmlhttp.open("GET", "parroquia.jsp?estado=" + estado + "&municipio=" + municipio, true);
xmlhttp.send();
}
</script>
</body>
</html>
codigo archivo municipio.jsp
<%--
Document : municipio
Created on : 9 jul. 2023, 8:00:36 p. m.
Author : alex2
--%>
<%@page import="conexion.conexion"%>
<%@ page import="java.sql.*" %>
<%
String estado = request.getParameter("estado");
Connection con = conexion.obtenerConexion();
Statement stmt = con.createStatement();
ResultSet rs = stmt.executeQuery("SELECT * FROM municipio WHERE Codestado='" + estado + "'");
while (rs.next()) {
%>
<option value="<%=rs.getString("Codmunicipio")%>"><%=rs.getString("Municipio")%></option>
<%
}
rs.close();
stmt.close();
%>
codigo archivo parroquia.jsp
<%--
Document : parroquia
Created on : 9 jul. 2023, 8:00:36 p. m.
Author : alex2
--%>
<%@page import="conexion.conexion"%>
<%@ page import="java.sql.*" %>
<%
String estado = request.getParameter("estado");
String municipio = request.getParameter("municipio");
Connection con = conexion.obtenerConexion();
Statement stmt = con.createStatement();
ResultSet rs = stmt.executeQuery("SELECT * FROM parroquia WHERE Codestado='" + estado + "' AND Codmunicipio='" + municipio + "'");
while (rs.next()) {
%>
<option value="<%=rs.getString("Codparroquia")%>"><%=rs.getString("Parroquia")%></option>
<%
}
rs.close();
stmt.close();
%>
codigo para conexion a la base de datos coenxion.java
package conexion;
/**
*
* @author alex2
*/
import java.sql.Connection;
import java.sql.DriverManager;
public class conexion {
public static void main(String[] args) {
obtenerConexion();
}
// Método que se encarga de cargar el driver de MySQL
private static void conectar() {
Connection con = null;
String Driver="com.mysql.jdbc.Driver";
try {
Class.forName(Driver);
System.out.println("Driver cargado con exito");
}
catch (Exception e) {
System.out.println("Ha ocurrido un error al cargar el Driver"+ e.getMessage());
}
}
// Método que se encarga de obtener la conexión con la base de datos
public static Connection obtenerConexion() {
Connection con = null;
try {
conectar();
// Se establece la conexión con la base de datos
con = DriverManager.getConnection("jdbc:mysql://localhost:3306/alex?useUnicode=true&useJDBCCompliantTimezoneShift=true&useLegacyDatetimeCode=false&serverTimezone=UTC&useUnicode=true&characterEncoding=UTF-8", "root", "12569655");
System.out.println("Se ha establecido la conexión");
} catch (Exception e) {
System.out.println("Ha ocurrido un error al obtener la conexión"+ e.getMessage());
}
return con;
}
}
- formulariojsp-main.zip(5,1 KB)
Valora esta pregunta
0