三级联动
三级联动实现方式
注：直接进本jsp页面就可，不用先查询再进页面
1、jsp页面
<%--
Created by IntelliJ IDEA.
User: Mr.Xue
Date: 2017/9/3
Time: 17:41
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
<title>收货地址</title>
<script type="text/javascript" src="/js/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function() {
// setCity("top", "0");//页面加载时就现实数据库第一个数据，一定要加上
setCity("top", 1000);
$("#top").change(function() {
// 当省级改变的时候，让市级和县级文本清空
$("#center option").html("<option>请选择</option>");
$("#button option").html("<option>请选择</option>");
// $("#button option").remove();
// $("#center option").remove();
//获得省级的id
var pid=$("#top option:selected").val();
alert(pid);
//加载该省级的市级数据
setCity("center", pid);
});
$("#center").change(function() {
//当市级改变的时候，让县级文本清空
$("#button option").html("<option>请选择</option>");
// $("#button option").remove();
//获取城市的pid
var pid=$("#center option:selected").val();
alert(pid);
//加载该省市级的县级数据
setCity("button",pid );
});
});
//selectid:select标签的id，pid数据库省级县级的pid
function setCity(selectid, pid) {
$.ajax({
url : "/news/dict.action",
type : "get",
cache : false,
data:{
pid:pid
},
success : function(res) {
//注意!!!这里必须使用eval(res)函数，否则获取到的json数据无法遍历,无话获取到数据
var arr = eval(res);
//遍历返回的json数据加载到select标签;
$.each(arr, function(key, val) {
$("#" + selectid).append(
" <option value='" + val.id + "'>"
+ val.name + "</option>");
});
}
});
};
</script>
</head>
<body>
<table>
<tr>
<td><h5>城市下拉框</h5></td>
<td>
<select id="top" style="width:130px">
<option>请选择省份/直辖市</option>
<%--<c:forEach items="${dics}" var="dic">--%>
<%--<option value="${dic.id}">${dic.name}</option>--%>
<%--</c:forEach>--%>
</select>
<select id="center" style=" width:130px">
<option >请选择城市/区</option>
</select>
<select id="button" style=" width:130px">
<option>请选择县/区</option>
</select>
</td>
</tr>
</table>
</body>
</html>
2、controller类查询方法
// ***特别说明：返回类型list
@RequestMapping(value = "dict",method = RequestMethod.GET)
@ResponseBody
public List dict(String pid){
List<Dictionary> dics=service.selectAddress(pid);
return dics;
}
3、数据字典字段
id 区域id,pid 所属区域id,name 区域名称,value（暂时无用）,creat_time 添加时间
