【发布时间】：2014-09-18 19:28:04
【问题描述】：
我对 jquery 不太熟悉，但在这里我正在尝试这样做：
我正在尝试将一个下拉列表的值传递给另一个下拉列表，这是 jsp：
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
import="java.sql.*,com.connection.DBConnection;"%>
<!DOCTYPE html>
<html>
<head>
<title>Country</title>
<style>
.formContainer {
margin-left: auto;
margin-right: auto;
width: 800px;
border-radius: 15px;
background-color: #75D1FF;
text-align: center;
padding-top: 5px;
padding-bottom: 5px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="Country.js"></script>
</head>
<body>
<div class="formContainer">
<form action="SampleServlet" method="get">
<fieldset>
<label>Country :</label> <select id="countryid" name="country">
<option value='select'>Select</option>
<%
Connection con = DBConnection.getConnection();
Statement st = con.createStatement();
String sql = "select * from country";
ResultSet rs = st.executeQuery(sql);
while (rs.next()) {
%>
<option value='<%=rs.getString(2)%>'><%=rs.getString(2)%></option>
<%
}
rs.close();
%>
</select><br />
<div class="Stateselect">
<select id="Stateid">
</select>
</div><br /><br />
<div class="Cityselect">
<select id="Cityid" onchange="loadXMLDoc()">
</select>
</div><br /><br />
<div class="Areaselect">
<select id="Areaid"></select>
</div><br /><br />
<div class="buttonsDiv">
<button type="submit">Submit</button>
<button type="reset">Reset</button>
</div>
</fieldset>
</form>
</div>
</body>
</html>
在这里，根据我选择的国家/地区，应显示州，取决于州的城市和来自城市的地区。我在这里使用了三个 servlet 类，即 CountryServlet、StateServlet 和 CityServlet 这是我正在使用的 js 文件：
$(document).ready(function() {
$(".Stateselect,.Cityselect,.Areaselect").hide();
$("#countryid").change(function() {
var country = document
.getElementById("countryid").value;
if (country != 'select') {
$.ajax({
url : "ActionServlet?country="+ country,
method : "GET",
type : "html",
success : function(
result) {
$(".Stateselect").html(result);
$(".Stateselect").show(700);
}
});
} else {
$(".Stateselect").hide(700);
};
});
if(document.getElementById("Stateid").style.display != "none")
{
$('#Stateid').change(function() {
var country = document.getElementById("country").value;
var state = document.getElementById("Stateid").value;
if (country != 'select' && state != null) {
$.ajax({
url : "StateServlet?country="+ country+ "&state="+ state,
method : "GET",
type : "html",
success : function(result) {
$(".Cityselect").html(result);
$(".Cityselect").show(700);
}
});
} else {
$(".Cityselect").hide(700);
};
});
}
if(document.getElementById("Cityid").style.display != "none") {
$('#Cityid').change(function() {
var country = document.getElementById("country").value;
var state = document.getElementById("Stateid").value;
var city = document.getElementById("Cityid").value;
if ((country != 'select' && state != 'select') && city != 'select') {
$.ajax({
url : "CityServlet?country="+ country + "&state=" + state + "&city="+ city,
// SampleServlet?country=India&state=Telangana&city=Hyderabad&area=Madhapur
method : "GET",
type : "html",
success : function(result) {
$(".Areaselect").html(result);
$(".Areaselect").show(700);
}
});
} else {
$(".Areaselect").hide(700);
};
});
};
});
问题是，只有第一个 ajax 调用有效。其余两个都没有。请帮忙。提前感谢
【问题讨论】：
标签： javascript jquery ajax jsp