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省市区三级联动+struts2
C#自定义控件--美化ComboBox源码--201903
C#自定义控件--美化ComboBox源码-924.rarC#自定义控件--美化ComboBox源码-924.rarC#自定义控件--美化ComboBox源码-924.rar
本人写的一些简单的程序，供初学C#新手参照学习，高手绕道！
vb捕获combobox-edit-内容
This ComboBox is an ASP.NET 2.0 AJAX Server Control. Please find out functional list in latest release note.This ComboBox is an ASP.NET 2.0 AJAX Server Control. Please find out functional list in ...
用Ext 2.0 combobox 做的省份和城市联动选择框的例程
WPF、Prism实现ComboBox省市县三级级联
ComBoBox组件重写ComBoBox组件重写ComBoBox组件重写
wpf comboBox 下拉框全国地址联动 的整个项目代码
datagridview里面使用combobox进行二级联动的一个使用效果。
ComboBOX 组件自制的C#.NET
由于unity3d 5.3以上的版本才有UGUI 的DrowDownList组件，其它版本没有。于是参照JS下拉列表构建思想，制作了该组件。已经打包成了资源包，压缩包内包含有效果图和代码部分说明。
NULL 博文链接：https://chenxueyong.iteye.com/blog/336117
QtQuick.Controls提供了ComboBox组件，该组件能够满足日常的下拉选择框的需求，但当需要用户在ComboBox中通过输入关键字进行自动匹配时，原生的组件虽然提供了editable属性用于输入关键字，但是匹配内容不弹出下拉框...
NULL 博文链接：https://weistar.iteye.com/blog/1874758
ext,ext combobox,ext二级联动，ext combobox二级联动 ___本人的原则:上传好东西,但绝不便宜.因为自己的心血 ext combobox二级联动,ext ,ext combobox,combobox,combobox二级联动,ext 二级联动 groupCombo.on('...
int nLevel =ComboBox1->ItemIndex;//纠错等级 int nVersion =StrToInt(ComboBox2->Text);//版本 bool bAutoExtent =true;//是否自动扩展 int nMaskingNo = StrToInt(ComboBox3->Text);//掩码模式 AnsiString ...
Flex设置下拉框ComboBox组件在不可编辑状态下的选中样式