在写项目的时候,很多时候都会用到二级联动和三级联动,今天给大家上传下代码。
下载地址 : http://download.csdn.net/detail/yp18810420654/9852052
一、小功能是用SpringMVC mybatis 写的,配置文件复制之前的项目,可能有些无用的配置,不影响使用
二、功能包括二级联动(省市),三级联动(省市区)
三、文件中自带数据库,导入即可使用
四、数据库是mySQl的,使用时请把用户名和密码改成本机的
五、具体使用哪个jar包我没有找,把之前SpringMVC项目上用的jar包全部放在了WEB-INF lib文件夹下,全部导入项目即可运行
六、本项目是给那些刚接触Java,对ajax使用不熟练的人提供
PS:我使用ajax时间也不长,方法有很多,也许我这不是最好的,但是可以达到自己的目的 。
实体类
public class Province {
private int id;
private String pname;
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getPname() {
return pname;
}
public void setPname(String pname) {
this.pname = pname;
}
}
public class City {
private int id;
private String cname;
private int provinceId;
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getCname() {
return cname;
}
public void setCname(String cname) {
this.cname = cname;
}
public int getProvinceId() {
return provinceId;
}
public void setProvinceId(int provinceId) {
this.provinceId = provinceId;
}
}
public class Area {
private int id;
private String aname;
private int cityId;
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getAname() {
return aname;
}
public void setAname(String aname) {
this.aname = aname;
}
public int getCityId() {
return cityId;
}
public void setCityId(int cityId) {
this.cityId = cityId;
}
}
<mapper namespace="com.mapper.CityMapper">
<!-- 通过省份id查询Ciyt -->
<select id="selectCityById" resultType="com.entity.City">
select * from city where provinceId = #{provinceId }
</select>
</mapper>
<mapper namespace="com.mapper.ProvinceMapper">
<!-- 查询所有省份信息 -->
<select id="selAll" resultType="com.entity.Province">
select * from province
</select>
<!-- 通过省份id查询Ciyt -->
<select id="selectCityById" resultType="com.entity.City">
select * from city where provinceId = #{proId}
</select>
</mapper>
<mapper namespace="com.mapper.AreaMapper">
<!-- 通过城市id查询area -->
<select id="selectAreaById" resultType="com.entity.Area">
select * from area where cityId = #{cityId }
</select>
</mapper>
控制层 controller
//显示所有部门
@RequestMapping("/showPro.action")
public String selAll(int save,WebRequest request){
List<Province> proList = provinceservice.selAll();
request.setAttribute("proList", proList,WebRequest.SCOPE_SESSION);
if(save == 1){
return "two.jsp";
}else{
return "three.jsp";
}
}
//选择省份出来城市
@ResponseBody
@RequestMapping(value="/selectCityById.action",produces = "text/html;charset=UTF-8")
public String selectCityById(String proId,HttpServletRequest request){
List<City> cityList = cityservice.selectCityById(Integer.valueOf(proId));
Gson gson = new Gson();
String json = gson.toJson(cityList);
return json;
}
//选择城市出来区县
@ResponseBody
@RequestMapping(value="/selectAreaById.action",produces = "text/html;charset=UTF-8")
public String selectAreaById(String cid,HttpServletRequest request){
List<Area> areaList = areaservice.selectAreaById(Integer.valueOf(cid));
Gson gson = new Gson();
String json = gson.toJson(areaList);
return json;
}
二级联动 jsp页面
<script type="text/javascript">
//级联操作,选择省份出来市
function getCityListById(){
var proId = $("#proId").val();
$.ajax({
type: "post",
url: "selectCityById.action",
data: "proId=" + proId,
success: function(msg){
//存到文本域方便职位的级联操作
$("#list").val(msg);
var list = eval("("+msg+")");
var html = "";
for(var i = 0;i < list.length;i++){
html += "<option value='"+list[i].id+"'>"+list[i].cname+"</option>";
}
$("#cid").html(html);
}
});
}
</script>
</head>
<body>
省份:
<select name="pname" id="proId" οnchange="getCityListById();" >
<option value="">--请选择--</option>
<c:forEach items="${proList }" var="pro">
<option value="${pro.id }">${pro.pname }</option>
</c:forEach>
</select>
城市:
<select name="cname" id="cid">
<option value="">--请选择--</option>
</select>
</body>
<script type="text/javascript">
//级联操作,选择省份出来市
function getCityListById(){
var proId = $("#proId").val();
$.ajax({
type: "post",
url: "selectCityById.action",
data: "proId=" + proId,
success: function(msg){
//存到文本域方便职位的级联操作
$("#list").val(msg);
var list = eval("("+msg+")");
var html = "";
for(var i = 0;i < list.length;i++){
html += "<option value='"+list[i].id+"'>"+list[i].cname+"</option>";
}
$("#cid").html(html);
//选择完省份之后出现的默认市,出现默认的区县
var cid = $("#cid").val();
$.ajax({
type: "post",
url: "selectAreaById.action",
data: "cid=" + cid,
success: function(msg){
//存到文本域方便职位的级联操作
$("#list").val(msg);
var list = eval("("+msg+")");
var html = "";
for(var i = 0;i < list.length;i++){
html += "<option value='"+list[i].id+"'>"+list[i].aname+"</option>";
}
$("#aid").html(html);
}
});
}
});
}
//级联操作,选择城市出来对应的区县
function getAreaListById(){
var cid = $("#cid").val();
$.ajax({
type: "post",
url: "selectAreaById.action",
data: "cid=" + cid,
success: function(msg){
//存到文本域方便职位的级联操作
$("#list").val(msg);
var list = eval("("+msg+")");
var html = "";
for(var i = 0;i < list.length;i++){
html += "<option value='"+list[i].id+"'>"+list[i].aname+"</option>";
}
$("#aid").html(html);
}
});
}
</script>
</head>
<body>
省份:
<select name="pname" id="proId" οnchange="getCityListById();">
<option value="">--请选择--</option>
<c:forEach items="${proList }" var="pro">
<option value="${pro.id }">${pro.pname }</option>
</c:forEach>
</select>
城市:
<select name="cname" id="cid" οnchange="getAreaListById();" >
<option value="">--请选择--</option>
</select>
区县:
<select name="aname" id="aid">
<option value="">--请选择--</option>
</select>
</body>
二级联动 三级联动的代码 mapper层 和 service 层没有上传,代码源自己下载就行,里面附带数据库