请用jsp写一个二级联动
时间: 2024-05-04 18:19:19 浏览: 111
二级联动一般是指两个下拉框,第一个下拉框选择一个选项后,第二个下拉框的选项会随之改变。
下面是一个简单的 JSP 代码示例,实现了一个省市二级联动:
```
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>省市二级联动</title>
</head>
<body>
<form>
<label>请选择省份:</label>
<select name="province" onchange="getCity(this.value)">
<option value="">请选择</option>
<option value="广东">广东</option>
<option value="浙江">浙江</option>
<option value="江苏">江苏</option>
</select>
<br>
<label>请选择城市:</label>
<select name="city" id="city">
<option value="">请选择</option>
</select>
</form>
<script>
function getCity(province) {
var xmlhttp;
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("city").innerHTML = this.responseText;
}
};
xmlhttp.open("GET", "getCity.jsp?province=" + province, true);
xmlhttp.send();
}
</script>
</body>
</html>
```
在上述代码中,第一个下拉框用来选择省份,第二个下拉框用来显示城市。当第一个下拉框的选项改变时,会调用 `getCity()` 函数,该函数会向服务器发送一个 HTTP 请求,请求的 URL 是 `getCity.jsp?province=` 加上所选省份的值。服务器返回一个包含城市选项的 HTML 代码,然后使用 JavaScript 将其填充到第二个下拉框中。
下面是 `getCity.jsp` 的代码:
```
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String province = request.getParameter("province");
if (province.equals("广东")) {
%>
<option value="">请选择</option>
<option value="广州">广州</option>
<option value="深圳">深圳</option>
<option value="东莞">东莞</option>
<%
} else if (province.equals("浙江")) {
%>
<option value="">请选择</option>
<option value="杭州">杭州</option>
<option value="宁波">宁波</option>
<option value="温州">温州</option>
<%
} else if (province.equals("江苏")) {
%>
<option value="">请选择</option>
<option value="南京">南京</option>
<option value="苏州">苏州</option>
<option value="无锡">无锡</option>
<%
}
%>
```
在 `getCity.jsp` 中,首先获取传递过来的省份值,然后根据省份值返回相应的城市选项。这里只是一个简单的示例,实际应用中可能需要从数据库中动态获取城市数据。
阅读全文