我正在尝试在国家，州和城市中进行级联下拉。
我的问题是，国家/地区下拉列表显示千值，但与国家/地区相关的州未在州下拉列表中显示，城市也未显示。
我正在尝试弹簧工具套装。
我的问题是，国家/地区下拉列表显示了千元的价值，但是与国家/地区相关的州没有在州下拉列表中以及城市中显示。
index.jsp
<%@page import="java.sql.*" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Dynamic Dependent Select Box Using jQuery, Ajax & JSP with MySql</title>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
function country_change()
{
var x = document.getElementById("country").selectedIndex;
alert(document.getElementsByTagName("option")[x].value);
debugger;
var country = $(".country").val();
$.ajax({
type: "GET",
url: "state.jsp",
data: "country_id="+country,
cache: false,
success: function(response)
{
$(".state").html(response);
}
});
}
function state_change()
{
var state = $(".state").val();
$.ajax({
type: "GET",
url: "city.jsp",
data: "state_id="+state,
cache: false,
success: function(response)
{
$(".city").html(response);
}
});
}
</script>
<style>
label
{
font-weight:bold;
padding:10px;
}
div
{
margin-top:100px;
}
select
{
width:200px;
height:35px;
}
</style>
</head>
<body>
<center>
<div>
<label>Country :</label>
<select id="country" onclick="country_change()">
<option selected="selected">--Select Country--</option>
<%
try
{
Class.forName("com.mysql.jdbc.Driver"); //load driver
Connection con=DriverManager.getConnection("jdbc:mysql://localhost:3306/dynamic_db","root","root"); //create connection
PreparedStatement pstmt=null ; //create statement
pstmt=con.prepareStatement("select country_id,country_name from country"); //sql select query
ResultSet rs=pstmt.executeQuery(); //execute query and set in resultset object rs.
while(rs.next())
{
%>
<option value="<%=rs.getInt("country_id")%>">
<%=rs.getString("country_name")%>
</option>
<%
}
con.close(); //close connection
}
catch(Exception e)
{
out.println(e);
}
%>
</select>
<label>State :</label>
<select class="state" onchange="state_change()">
<option selected="selected">--Select State--</option>
</select>
<label>City :</label>
<select class="city">
<option selected="selected">--Select City--</option>
</select>
</div>
<br />
</center>
</body>
</html>
state.jsp
<%@page import="java.sql.*" %>
<%
if(request.getParameter("country_id")!=null)
{
int id=Integer.parseInt(request.getParameter("country_id")); //get country_id from index.jsp page with function country_change() through ajax and store in id variable
System.out.println(id+"country");
try
{
Class.forName("com.mysql.jdbc.Driver"); //load driver
Connection con=DriverManager.getConnection("jdbc:mysql://localhost:3306/dynamic_db","root","root"); //create connection
PreparedStatement pstmt=null ; //create statement
pstmt=con.prepareStatement("select state_id,state_name,country_id from state where country_id=?"); //sql select query
pstmt.setInt(1,id);
ResultSet rs=pstmt.executeQuery(); //execute query and set in resultset object rs.
%>
<option selected="selected">--Select State--</option>
<%
while(rs.next())
{
%>
<option value="<%=rs.getInt("state_id")%>">
<%=rs.getString("state_name")%>
</option>
<%
}
con.close(); //close connection
}
catch(Exception e)
{
out.println(e);
}
}
%>
city.jsp
<%@page import="java.sql.*" %>
<%
if(request.getParameter("state_id")!=null)
{
int id=Integer.parseInt(request.getParameter("state_id")); //get state_id from index.jsp page with function state_change() through ajax and store in id variable.
try
{
Class.forName("com.mysql.jdbc.Driver"); //load driver
Connection con=DriverManager.getConnection("jdbc:mysql://localhost:3306/dynamic_db","root","root"); //create connection
PreparedStatement pstmt=null ; //create statement
pstmt=con.prepareStatement("select * from city where state_id=? "); //sql select query
pstmt.setInt(1,id);
ResultSet rs=pstmt.executeQuery(); //execute query and set in resultset object rs.
%>
<option selected="selected">--Select City--</option>
<%
while(rs.next())
{
%>
<option value="<%=rs.getInt("city_id")%>">
<%=rs.getString("city_name")%>
</option>
<%
}
con.close(); //close connection
}
catch(Exception e)
{
out.println(e);
}
}
%>
我希望在“国家/地区”下拉列表中选择国家时的输出会自动显示所选国家/地区相关州和国家/地区相关城市的下拉列表。
但是实际输出显示国家/地区下拉列表中的唯一国家/地区，每当在国家/地区下拉列表中选择国家时，与国家/地区相关的状态都不会显示在国家/地区下拉列表中。
数据库表的详细信息是：国家，州和城市。
1.country_id(pk)
2.Country_name.
1.state_id (pk).
2.state_name.
3.country_id (fk).
1.city_id (pk).
2.city_name.
3.state_id (fk).
那是数据库表字段。
我还尝试正常地级联下拉其工作，但是我试图从数据库中获取值，但它不起作用。
它显示的是唯一的国家/地区值，国家/地区相关的州和州/市相关的城市没有获取。
在数据库中，三个表是使用主键和外键的关系。 但是显示该国家中唯一一个国家的价值下降了。
我不知道我在这里做错了什么，所以您能帮我吗？
我想创建一个级联的下拉菜单，但看不到我做错了什么。我已经尝试了一切。我只是个主意。
请提供解决方案。
谢谢