用JSP写一个三级联动的下拉框
时间: 2024-06-08 16:09:47 浏览: 14
三级联动下拉框,也称为省市区三级联动,是常见的前端交互功能之一。下面是一个用JSP实现的例子:
1. 在JSP页面中添加三个select元素,分别对应省、市和区县:
```html
省:<select id="province" name="province" onchange="loadCity()">
<option value="">请选择省份</option>
<option value="北京市">北京市</option>
<option value="上海市">上海市</option>
<<option value="广东省">广东省</option>
</select>
市:<select id="city" name="city" onchange="loadDistrict()">
<option value="">请选择城市</option>
</select>
区:<select id="district" name="district">
<option value="">请选择区县</option>
</select>
```
2. 在页面底部添加JavaScript代码,用于异步加载对应的市和区县选项:
```javascript
function loadCity() {
var province = document.getElementById("province").value;
var xmlhttp;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("city").innerHTML = xmlhttp.responseText;
document.getElementById("district").innerHTML = "<option value=''>请选择区县</option>";
}
}
xmlhttp.open("GET", "getCity.jsp?province=" + province, true);
xmlhttp.send();
}
function loadDistrict() {
var city = document.getElementById("city").value;
var xmlhttp;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("district").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET", "getDistrict.jsp?city=" + city, true);
xmlhttp.send();
}
```
3. 在后端编写getCity.jsp和getDistrict.jsp,用于返回对应的市和区县选项:
getCity.jsp
```java
<%@ page contentType="text/html; charset=UTF-8" language="java" %>
<%
String province = request.getParameter("province");
if (province.equals("北京市")) {
%>
<option value="东城区">东城区</option>
<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>
<option value="普陀区">普陀区</option>
<%
} else if (province.equals("广东省")) {
%>
<option value="广州市">广州市</option>
<option value="深圳市">深圳市</option>
<option value="珠海市">珠海市</option>
<option value="汕头市">汕头市</option>
<option value="韶关市">韶关市</option>
<%
}
%>
```
getDistrict.jsp
```java
<%@ page contentType="text/html; charset=UTF-8" language="java" %>
<%
String city = request.getParameter("city");
if (city.equals("东城区")) {
%>
<option value="东华门街道">东华门街道</option>
<option value="景山街道">景山街道</option>
<option value="交道口街道">交道口街道</option>
<option value="东四街道">东四街道</option>
<option value="灯市口街道">灯市口街道</option>
<%
} else if (city.equals("西城区")) {
%>
<option value="西长安街街道">西长安街街道</option>
<option value="新街口街道">新街口街道</option>
<option value="金融街街道">金融街街道</option>
<option value="什刹海街道">什刹海街道</option>
<option value="西四街道">西四街道</option>
<%
} else if (city.equals("朝阳区")) {
%>
<option value="朝外街道">朝外街道</option>
<option value="建外街道">建外街道</option>
<option value="呼家楼街道">呼家楼街道</option>
<option value="三里屯街道">三里屯街道</option>
<option value="团结湖街道">团结湖街道</option>
<%
}
%>
```
注意事项:
1. 前端需要加载jQuery库或自己实现XMLHttpRequest对象的异步请求。
2. 后端需要根据实际情况编写对应的数据返回逻辑。
3. 代码中的数据仅为示例,实际应用需要根据实际需求进行修改。