我想为城市及其地区设计多依赖下拉列表。
可以在下拉列表中显示城市列表及其值。
选择任何城市下拉列表时,都无法显示地区列表。
我编写了 ajax 代码,将城市ID发送到district.jsp
。我已经通过println
在district.jsp文件中获得了地区值,但是这些值无法添加到option
标记中。
如何在customer_forum.jsp中获取地区值
这是下面显示的代码段。
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label class="col-sm-3 control-label">City</label>
<div class="col-sm-5">
<c:if test="${customer == null}">
<select id="cityDropDown" name="city" class="selectpicker" onchange="city_change()">
<option disabled selected>Şehir Seçin</option>
<c:forEach var="city" items="${cityList}">
<option value="${city.id}">${city.cityName}</option>
</c:forEach>
</select>
</c:if>
<c:if test="${customer != null}">
<select id="cityDropDown" name="city" class="selectpicker" onchange="city_change()">
<c:forEach var="city" items="${cityList}">
<c:if test="${city.id eq customer.city.id}">
<option value="${city.id}" selected="selected">${city.cityName}</option>
</c:if>
</c:forEach>
</select>
</c:if>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label class="col-sm-3 control-label">District</label>
<div class="col-sm-5">
<c:if test="${customer == null}">
<select id="districtDropdown" name="district" class="selectpicker">
<option disabled selected>Select District</option>
<!--<c:forEach var="district" items="${districtList}">
<option value="${district.id}">${district.name}</option>
</c:forEach>-->
</select>
</c:if>
<c:if test="${customer != null}">
<select id="districtDropdown" name="district" class="selectpicker">
<!--<c:forEach var="district" items="${districtList}">
<c:if test="${district.id eq customer.district.id}">
<option value="${district.id}" selected="selected">${district.name}</option>
</c:if>
</c:forEach>-->
</select>
</c:if>
</div>
</div>
</div>
</div>
Ajax代码
function city_change()
{
var city_id = $("#cityDropDown").val();
console.log(city_id);
$.ajax({
type: "POST",
url: "district.jsp",
data: "city_id="+city_id,
cache: false,
success: function(response)
{
console.log(response);
$("#districtDropdown").html(response);
}
});
}
district.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@page import="java.sql.*" %>
<%
if(request.getParameter("city_id")!=null)
{
int id=Integer.parseInt(request.getParameter("city_id")); //get city_id from index.jsp page with function city_change() through ajax and store in id variable
System.out.println("district.jsp / City Id : " + id);
try
{
Class.forName("oracle.jdbc.driver.OracleDriver"); //load driver
Connection con=DriverManager.getConnection("jdbc:oracle:thin:@localhost:1521:xe","JSPPROJECTDATABASE","123"); //create connection
PreparedStatement pstmt=null ; //create statement
pstmt=con.prepareStatement("select * from district where city_id=? "); //sql select query
pstmt.setInt(1,id);
ResultSet rs=pstmt.executeQuery(); //execute query and set in resultset object rs.
%>
<option disabled selected>Select District</option>
<%
while(rs.next())
{
int i = rs.getInt("ID");
String str = rs.getString("DISTRICT_NAME");
System.out.println("district.jsp / District ID : " + i + " District Name : " + str);
%>
<option value="<%=rs.getInt("ID")%>">
<%=rs.getString("DISTRICT_NAME")%>
</option>
<%
}
con.close(); //close connection
}
catch(Exception e)
{
out.println(e);
}
}
%>
在ajax代码的成功部分中,其结果为
<option disabled selected>Select District</option>
<option value="5">
St.John
</option>
<option value="6">
Castle
</option>
但它不会显示在下拉列表中。