1、界面展示
2、数据库脚本
--省份表结构 create table province ( id int(10) not null, name varchar(50) default null ) engine=innodb default charset=utf8; --城市表结构 create table city ( id int(10) not null, name varchar(50) default null, pro_id int(10) not null ) engine=innodb default charset=utf8; --省份表数据初始化 INSERT INTO province VALUES (1,'福建省'); INSERT INTO province VALUES (2,'广东省'); INSERT INTO province VALUES (3,'湖南省'); INSERT INTO province VALUES (4,'河南省'); --城市表数据初始化 INSERT INTO city VALUES (1,'厦门市',1); INSERT INTO city VALUES (2,'漳州市',1); INSERT INTO city VALUES (3,'广州市',2); INSERT INTO city VALUES (4,'深圳市',2); INSERT INTO city VALUES (5,'长沙市',3); INSERT INTO city VALUES (6,'湘潭市',3); INSERT INTO city VALUES (7,'郑州市',4); INSERT INTO city VALUES (8,'商丘市',4);
3、WebContent/jsp/combobox_001.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String root = request.getContextPath();
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>【combobox组件】-001-省市联动案例</title>
<!-- 引入外部样式 -->
<link rel="stylesheet" type="text/css" href="<%=root %>/css/common.css" />
<!-- 引入easyui依赖库 -->
<script type="text/javascript" src="<%=root %>/js/jquery-easyui-1.2.6/jquery-1.7.2.min.js"></script>
<link rel="stylesheet" type="text/css" href="<%=root %>/js/jquery-easyui-1.2.6/themes/default/easyui.css" />
<link rel="stylesheet" type="text/css" href="<%=root %>/js/jquery-easyui-1.2.6/themes/icon.css" />
<script type="text/javascript" src="<%=root %>/js/jquery-easyui-1.2.6/jquery.easyui.min.js"></script>
<script type="text/javascript" src="<%=root %>/js/jquery-easyui-1.2.6/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript">
$(function() {
$('#sel_pro').combobox({
onSelect:function() {
var pid = $('#sel_pro').combobox('getValue');
$('#sel_city').combobox('setValue','');
$('#sel_city').combobox('reload','<%=root%>/ProvinceServlet?method=getCity&pid='+pid);
}
});
});
</script>
</head>
<body>
省份：<select id="sel_pro" class="easyui-combobox" url="<%=root%>/ProvinceServlet?method=getProList" valueField="id" textField="name" panelHeight="auto"></select>
城市：<select id="sel_city" class="easyui-combobox" valueField="id" textField="name" panelHeight="auto"></select>
</body>
</html>
4、com.easyui.bean.Province.java
package com.easyui.bean;
/**
* 省份信息
* @author LiPiaoShui
*/
public class Province {
private int id;
private String name;
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
}
5、com.easyui.bean.CityBean.java
package com.easyui.bean;
/**
* 城市基本信息
* @author LiPiaoShui
*/
public class CityBean {
private int id;
private String name;
private int proId;
public CityBean() {
}
public CityBean(int id, String name) {
this.id = id;
this.name = name;
}
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public int getProId() {
return proId;
}
public void setProId(int proId) {
this.proId = proId;
}
}
6、com.easyui.servlet.ProvinceServlet.java
package com.easyui.servlet;
import java.io.IOException;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import net.sf.json.JSONArray;
import com.easyui.bean.CityBean;
import com.easyui.bean.Province;
import com.easyui.dao.ProvinceDao;
/**
* 省份和城市控制器
* @author LiPiaoShui
*/
public class ProvinceServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
private ProvinceDao pDao = new ProvinceDao();
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doPost(request, response);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String method = request.getParameter("method");
if("getProList".equals(method)) {
getProList(request,response);
} else if("getCity".equals(method)) {
getCity(request,response);
}
}
/**
* 根据省份ID获取所有城市信息
* @param request
* @param response
*/
private void getCity(HttpServletRequest request,
HttpServletResponse response) {
try {
String pid = request.getParameter("pid");
List<CityBean> cList = pDao.getCityListByProId(Integer.parseInt(pid));
response.setContentType("text/html;charset=utf-8");
response.getWriter().write(JSONArray.fromObject(cList).toString());
} catch (IOException e) {
e.printStackTrace();
}
}
/**
* 获取全部省份信息
* @param request
* @param response
*/
private void getProList(HttpServletRequest request,
HttpServletResponse response) {
try {
List<Province> pList = pDao.getProList();
response.setContentType("text/html;charset=utf-8");
response.getWriter().write(JSONArray.fromObject(pList).toString());
} catch (IOException e) {
e.printStackTrace();
}
}
}
7、com.easyui.dao.ProvinceDao.java
package com.easyui.dao;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;
import com.easyui.bean.CityBean;
import com.easyui.bean.Province;
import com.easyui.util.DBUtil;
/**
* 省份数据库操作类
* @author LiPiaoShui
*/
public class ProvinceDao {
/**
* 获取全部省份信息
* @return
*/
public List<Province> getProList() {
Connection conn = null;
PreparedStatement pstmt = null;
ResultSet rs = null;
List<Province> pList = new ArrayList<Province>();
try {
String sql = "select * from province";
conn = DBUtil.getConnection();
pstmt = conn.prepareStatement(sql);
rs = pstmt.executeQuery();
while(rs.next()) {
Province p = new Province();
p.setId(rs.getInt("id"));
p.setName(rs.getString("name"));
pList.add(p);
}
} catch (SQLException e) {
e.printStackTrace();
} finally {
DBUtil.close(rs, pstmt, conn);
}
return pList;
}
/**
* 根据省份ID获取所有城市信息
* @param pid
* @return
*/
public List<CityBean> getCityListByProId(int pid) {
Connection conn = null;
PreparedStatement pstmt = null;
ResultSet rs = null;
List<CityBean> cList = new ArrayList<CityBean>();
try {
String sql = "select * from city where pro_id="+pid;
conn = DBUtil.getConnection();
pstmt = conn.prepareStatement(sql);
rs = pstmt.executeQuery();
while(rs.next()) {
CityBean c = new CityBean();
c.setId(rs.getInt("id"));
c.setName(rs.getString("name"));
c.setProId(rs.getInt("pro_id"));
cList.add(c);
}
} catch (SQLException e) {
e.printStackTrace();
} finally {
DBUtil.close(rs, pstmt, conn);
}
return cList;
}
}
相关推荐
#### 二、Extjs4 combobox组件介绍 1. **基础概念**： - `combobox`（组合框）是Extjs框架中一种常用的UI控件，用于展示下拉列表供用户选择。 - 在本例中，combobox被用来实现省市区的选择功能，即用户选择省份后...
通过这个DOJO中国的示例，我们可以学习到如何利用Ext 2.0的Combobox组件创建具有联动功能的下拉选择框，这对于开发复杂的Web应用，尤其是涉及地理位置选择的场景，是非常实用的技巧。同时，这也展示了JavaScript库...
标题 "省市二级联动的EasyUI及jar包" 暗示了这个压缩包可能包含用于实现中国省市二级联动效果的EasyUI组件和相关的Java库文件（jar包）。EasyUI是一个基于jQuery的轻量级前端框架，它提供了丰富的UI组件，如表格、...
.NET省市联动不连数据库纯CS代码是一个常见的前端开发需求，主要应用于网页或应用程序中的下拉选择框，使得当用户在省的选择上发生变化时，市的选择框自动更新为对应省份的城市列表。这种功能可以提高用户体验，减少...
在这个案例中，三个ComboBox分别代表省份、城市和县（区），它们之间的联动是通过事件驱动编程来实现的。当用户在第一个ComboBox（省份）中选择一项时，对应的市的ComboBox会根据选定的省份动态加载数据；同理，当...
总的来说，"SSM+EasayUI实现省市二级联动"是一个典型的前后端交互案例，涉及到数据库设计、Java Web框架的使用、前端组件操作以及异步请求处理等多个环节。通过这个项目，开发者可以深入理解这些技术的集成与应用，...
在本案例中，我们将详细探讨如何利用EasyUI实现省市区的三级联动效果。 首先，我们需要了解EasyUI的基本概念。EasyUI是由一系列CSS样式和JavaScript插件组成的，这些插件涵盖了表单、窗口、菜单、布局等常见的前端...
运行应用程序，用户就可以看到省市联动的效果。 综上所述，省市列表框联动代码涉及Java Swing组件的使用、事件监听、数据结构以及界面布局等多个方面，是Java GUI编程中常见的实践案例。通过这种方式，开发者可以为...
总结来说，"ExtJs XML 省市县级联"项目展示了如何使用ExtJs的ComboBox组件，结合XML数据源，创建一个交互式的、三级联动的地区选择器。它涉及到了ExtJs的组件使用、数据绑定、事件监听、XML数据解析等多个技术点，...
总之，这个Demo为开发者提供了一个完整的实现iOS省市区三级联动的实例，涵盖了从数据模型设计、用户界面构建到事件处理等多个方面，是iOS开发中常见功能的一个经典案例。通过研究这个Demo，开发者可以更好地理解和...