Я пытаюсь сделать каскадный выпадающий список в стране, штате и городе.
В этой моей проблеме, в раскрывающемся списке страны отображаются тысячи значений, но связанные со страной состояния не отображаются в раскрывающемся списке состояний.вниз, а также и в городе.
Я пытаюсь в весенних костюмах для инструментов.
Моя проблема в том, что в раскрывающемся списке стран отображаются тысячи значений, но состояния, относящиеся к стране, не отображаются в штате.выпадающий список, а также город.
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).
это поля таблицы базы данных.
Я также пробую нормально каскадный выпадающий список своей работы, но я пытаюсь получить значения из базы данных, он не работает.
Он показывает только значения страны, связанные с ней государстваи связанный с государством город не выбирается.
В базе данных три таблицы - это отношения, использующие первичный ключ и внешний ключ.Но показывает раскрывающиеся значения единственной страны в стране.
Я не знаю, что я делаю здесь неправильно, так что вы можете мне помочь?
Я хочу создать раскрывающееся каскадное меню и не вижу, что я делаю неправильно.Я перепробовал все.У меня просто нет идей.
, пожалуйста, предоставьте решение.
Спасибо