通过jquery的ajax实现省市二级联动菜单
前提：有jquery.ajax基础、对servlet熟悉、有数据库基础
原理：加载页面时向数据库获取所有的省展示在select元素中，当用户选中某个省份时，向服务器发送ajax请求，获取对应省份下的城市
1、html页面代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>二级联动菜单</title>
<script src="js/jquery-1.8.0.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(function(){ //等待DOM加载完毕.
var province = jQuery("#province");
var city = jQuery("#city");
getProvince();
province.change(function(){
getCity(province.val()); //参数是选择框选中的value
//jQuery("#oppro").attr("disabled","true");
});
})
});
function getProvince(){
jQuery.ajax({
type: "post",
url: "data",
data:{param:"province"},
success: function(data){
var pros =(new Function("","return "+data))();
for(var i=0;i<pros.data.length;i++){
jQuery("#province").append("<option value="+(i+1)+">" + pros.data[i] + "</option>");
}
}
});
}
function getCity(provinceValue){
if("0" == provinceValue){
jQuery("#city").empty();
jQuery("#city").append("<option value='0'>请选择城市</option>");
}else{
jQuery.ajax({
type: "post",
url: "data",
data:{param:"city",optionValue:provinceValue},
success: function(data){
var citys =(new Function("","return "+data))();
jQuery("#city").empty();
jQuery("#city").append("<option value='0'>请选择城市</option>");
for(var i=0;i<citys.data.length;i++){
jQuery("#city").append("<option value="+(i+1)+">" + citys.data[i] + "</option>");
}
}
});
}
}
</script>
</head>
<body>
<form id="form1">
<select id="province">
<option value="0" id="oppro">请选择省份:</option>
</select>
<select id="city">
<option value="0" id="opcity">请选择城市:</optio
</select>
</form>
</body>
</html>
html页面主要是jquery的ajax，至于页面如何发送消息给服务器、服务器如何返回消息、页面如何获取服务器返回的消息，这些问题在我的
http://youzhibing.iteye.com/admin/blogs/1636755这篇博客中有提到，原理是一样的
2、服务器端：servlet
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
this.doPost(req, resp);
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
String param = req.getParameter("param");
ResultSet rs = null;
//取得省份列表
if("province".equals(param)){
try {
rs = getPreparedStatement().executeQuery();
} catch (SQLException e) {
e.printStackTrace();
}
}
//取得城市列表
if("city".equals(param)){
int optionValue = Integer.parseInt(req.getParameter("optionValue"));
try {
rs = getPreparedStatement(optionValue).executeQuery();
} catch (SQLException e) {
e.printStackTrace();
}
}
//返回数据给页面
String data="{data:[";
try {
while(rs.next()){
data += "\"" + rs.getString(2) + "\",";
}
} catch (SQLException e) {
e.printStackTrace();
}
data = data.substring(0, data.lastIndexOf(',')) + "]}";
resp.setContentType("text/html;charset=gb2312");
resp.setCharacterEncoding("gb2312");// 防止弹出的信息出现乱码
resp.getWriter().write(data);
}
配置文件：web.xml
<welcome-file-list>
<welcome-file>index.html</welcome-file>
</welcome-file-list>
<servlet>
<servlet-name>data</servlet-name>
<servlet-class>com.province.city.DataFromMysql</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>data</servlet-name>
<url-pattern>/data</url-pattern>
</servlet-mapping>
有问题、有意见都可以给我留言哦！
下面提供了myeclipse下的项目的压缩文件
分享到：
相关推荐
通过这种联动，当用户在一级下拉菜单（例如省份）中选择一个选项时，二级下拉菜单（例如城市）会自动更新为与所选省份相关的城市，同理，当选择城市后，三级下拉菜单（例如区/县）也会相应地更新。 首先，我们需要...
在这个场景中，我们看到一个基于jQuery实现的省市两级联动菜单。jQuery是一个强大的JavaScript库，它简化了DOM操作、事件处理、动画以及Ajax交互。以下是关于这个主题的详细知识： 1. **jQuery简介**：jQuery是由...
JavaScript在客户端接收到响应后，动态地更新二级菜单的内容。 实现这个功能的关键步骤包括： 1. **HTML结构**：创建基本的HTML菜单结构，包含三个级别：省份、城市和区县。每个菜单项应具有触发Ajax请求的事件...
在Java服务器页面（JSP）开发中，"中国省市三级联动"是一种常见的功能，用于创建交互式的下拉菜单，用户可以选择国家、省份和城市，这三个级别之间存在联动关系。这种功能在很多网站的地址填写或者区域选择场景中...
三级联动的基本原理是利用JavaScript或者jQuery等前端技术，配合Ajax异步请求，动态更新下拉菜单的内容。当用户在第一级（省份）做出选择时，触发事件，通过Ajax向服务器发送请求，获取与所选省份相关的城市数据；...
当用户在第一级下拉框（省份）中选择一个选项时，触发一个AJAX请求到后端服务，服务返回对应的市列表，前端接收到数据后更新第二级下拉框（市）。同样，当用户在市下拉框中选择后，会再次发送AJAX请求获取相应的地区...