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; } }