bean
/**
* 市
* @author Administrator
*下午3:37:43
*/
public class City {
private int id; //序号
private int cityid;
private String cityname; //城市名称
}
/**
* 省
* @author Administrator
*下午3:37:57
*/
public class Province {
private int id; //序号
private int provinceId;
private String province; //省名
private List<City> cities; //每个省下面的每个城市}
dao.impl
public class ProvinceDaoImpl implements ProvinceDao{
QueryRunner qr = new QueryRunner(C3p0Util.getDataSource()); //c3p0连接池连接数据库
@Override
//查找所有省的集合
public List<Province> findPros() {
String sql = "select * from provinces";
List<Province> plist = null;
try {
plist = qr.query(sql, new BeanListHandler<Province>(Province.class));
} catch (SQLException e) {
e.printStackTrace();
}
for(Province p : plist){
List<City> findCitiesByProID = findCitiesByProID(p.getProvinceId());
p.setCities(findCitiesByProID);
}
return plist;
}
@Override
//使用proid查找每个省相对应的城市
public List<City> findCitiesByProID(int proid) {
String querySql = "select * from citys where proid=?";
List<City> cities = null;
try {
cities = qr.query(querySql, new BeanListHandler<City>(City.class), proid);
} catch (SQLException e) {
e.printStackTrace();
}
return cities;
}
}
Servlet
@WebServlet(name="proCityServlet",value="/proCityServlet") //注解配置
public class ProCityServlet extends HttpServlet {
private ProvinceDao dao = new ProvinceDaoImpl();
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html; charset=UTF-8"); //响应编码格式
response.setCharacterEncoding("UTF-8");
List<Province> pros = dao.findPros();
System.out.println(pros);
Gson gson = new Gson(); //将集合转为json 需要导入Gson jar包
String str = gson.toJson(pros); //转换为JSON格式
System.out.println(str); //显示所有json,可以新建一个html 右击Format后方便查找json
response.getWriter().print(str); //响应至浏览器
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doGet(request, response);
}
}
js页面
$(function(){
var $proSelect = $("#province"); //省节点
var $citySelect = $("#city"); //市节点
$.getJSON(
"../proCityServlet", //servlet url
{},
function(data){ //发送到服务器的数据
//显示所有省份
for(var i=0;i<data.length;i++){
var proName = data[i].province; //循环遍历所有的省节点
//追加省节点
var $proOption = $("<option value="+data[i].provinceId+">"+proName+"</option>");
$proSelect.append($proOption);
}
//显示对应的城市
$proSelect.change(function(){ //切换省节点时触发事件
//重复切换后删除value 不为空的,避免叠加
$("#city>option[value!=‘‘]").remove();
var proId = $(this).val();
for (var i = 0; i < data.length; i++) {
if(data[i].provinceId == proId){ //手动切换到的省节点与查找到的省节点相等
var getCitys = data[i].cities; //获取到对应的城市集合
for(var y=0;y<getCitys.length;y++){
var cname = getCitys[y].cityname; //获取到对应城市名
var $cityOption = $("<option value="+getCitys[y].cityid+">"+cname+"</option>"); //创造新option节点
$citySelect.append($cityOption); //追加option节点
}
}
}
});
}
);
});
jsp显示页面
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script> <!-- 导入jQuery包 -->
<script type="text/javascript" src="city.js"></script> <!-- 导入js页面 -->
</head>
<body>
省份：<select id="province">
<option value="">--请选择省份--</option>
</select>
城市：<select id="city">
<option value="">--请选择城市--</option>
</select>
</body>
</html>
这样一来,我们切换省级下拉列表后,市级列表都与每个省级相对应。
时间： 2024-10-27 10:36:01