Невозможно перечислить несколько зависимых выпадающих в JSP

Question

Я хотел спроектировать многозадачный выпадающий список для города и его района.Список городов можно отобразить в выпадающем списке со своими значениями.Список районов не может быть отображен, если выбран какой-либо город из выпадающего списка.Я написал код ajax , чтобы отправить идентификатор города на district.jsp.У меня есть значения районов в файле district.jsp через println, но эти значения нельзя добавить в тег 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>

, но не отображается в выпадающем списке.