分析：在省列表框中选择某个省后，是列表框中出现与之对应的市列表，该动作发生在省列表框发生变化后，即选择了某个省后。
一、环境准备
1、准备数据库
2、准备页面
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/demo.js"></script>
</head>
<body>
省份：<select name="province" id="province">
<option value="">-请选择-
<option value="1">山西
<option value="2">广东
<option value="3">湖北
<option value="4">四川
</select>
城市：<select name="city" id="city">
<option value="">-请选择-
</select>
</body>二、使用json格式数据显示省市联动效果
serlvet代码：
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
try {
// 1、获取参数
int id = Integer.parseInt(request.getParameter("pid"));
// 2、dao找出所有参数
CityDao dao = new CityDaoImpl();
List<CityBean> list = dao.findCity(id);
/*
* 把list ---> json数据 JSONArray ---> 变成数组 ， 集合 [] JSONObject ---> 变成简单的数据 { name
* : zhangsan , age:18}
*/
JSONArray jsonArray = JSONArray.fromObject(list);
String json = jsonArray.toString();
response.setContentType("text/html;charset=utf-8");
response.getWriter().write(json);
} catch (SQLException e) {
e.printStackTrace();
}
}json：
阅读性更好 、 容量更小。 数据格式： {"name":"aaa" , "age":19}
//把javaBean 转化成 json数据
//3. 把list ---> json数据
//JSONArray ---> 变成数组 ， 集合 []
//JSONObject ---> 变成简单的数据 { name : zhangsan , age:18}
JSONArray jsonArray = JSONArray.fromObject(list);
String json = jsonArray.toString();JS代码:
$(function(){
//1、找到省份元素
$("#province").change(function(){
//2、一旦里面的值发生了改变，那么就去请求该省份的城市数据
var pid = $(this).val();
/*<list>
<city>
<id>1<id>
<pid>1</pid>
<cname>深圳</cname>
</city>
<city >
<id>2<id>
<pid>1</pid>
<cname>东莞</cname>
</city>
</list>*/
$.post("CityServlet",{pid:pid},function(data,status){
//先清空以前的值：
$("#city").html("<option value=''>-请选择-");
//遍历、追加
$(data).each(function(index,c){
$("#city").append("<option value='"+c.id+"'>"+c.cname)
});
},"json");
});
});dao实现：
public List<CityBean> findCity(int pid) throws SQLException {
QueryRunner runner = new QueryRunner(JDBCUtil.getDataSource());
String sql = "select * from city where pid= ?";
return runner.query(sql, new BeanListHandler<CityBean>(CityBean.class),pid);
}