前端:
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%request.setAttribute("ctx", request.getContextPath());%>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="${ctx}/css/bootstrap.min.css">
<link rel="stylesheet" href="${ctx}/css/bootstrap-theme.min.css">
<script src="${pageContext.request.contextPath}/js/jquery-1.11.3.js"></script>
<script type="text/javascript">
$.ajaxSettings.async=false;
$(function (){
/*追加初步的 省级下拉框*/
$.post("/linkage/city",{"level":0},function (obj) {
$.each(obj,function (){
$("#id1").append("<option value='"+this.id+"'>"+this.name+"</option>")
})
},"json");
findCity1();
findCity2();
})
findCity1=()=>{
$("#id2").empty();
var id=$("#id1").val();
$.post("/linkage/city",{"level":1,"id":id},function (obj) {
$.each(obj,function (){
$("#id2").append("<option value='"+this.id+"'>"+this.name+"</option>")
})
},"json");
findCity2();
}
findCity2=()=>{
$("#id3").empty();
var id=$("#id2").val();
$.post("/linkage/city",{"level":2,"id":id},function (obj) {
$.each(obj,function (){
$("#id3").append("<option value='"+this.id+"'>"+this.name+"</option>")
})
},"json")
}
</script>
</head>
<body>
<table>
<tr><td>地址:</td></tr>
<tr>
<td>
请选择: <select name="id1" id="id1" onchange="findCity1();">
</select>
</td>
</tr>
<tr>
<td>
请选择: <select name="id2" id="id2" onchange="findCity2();">
<option value=""></option>
</select>
</td>
</tr>
<tr>
<td>
请选择: <select name="id3" id="id3">
<option value=""></option>
</select>
</td>
</tr>
</table>
</body>
</html>
前端通过ajax发送数据到后端后 ,后端就接收参数 进行组合查询就好了
sql语句:
<mapper namespace="www.com.practice.mapper.LinkageMapper">
<select id="findCity" parameterType="www.com.practice.pojo.City"
resultType="www.com.practice.pojo.City">
select * from city where level=#{level}
<if test="id != null and id !=''">
and parent_id=#{id}
</if>
</select>
</mapper>