java實現省市區三級聯動
本文實例為大傢分享瞭java實現省市區三級聯動的具體代碼，供大傢參考，具體內容如下
我搭建的是SSM 框架：
一、實現三級聯動
以省市區為例：
我的想法很簡單 ，可能想的有點少，首先遍歷省份，當數據發生改變調用方法請求根據省的id去查詢市區的信息，當市區信息發生改變調用另一個方法去查詢縣區的信息
1、實體類entity：area
package com.htzn.entity;
public class Area {
private String id ;
private String name;
private String pid;
public String getId() {
return id;
}
public void setId(String id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getPid() {
return pid;
}
public void setPid(String pid) {
this.pid = pid;
}
}
2、接口層 dao
package com.htzn.dao;
import java.util.List;
import com.htzn.entity.Area;
public interface AreaDao {
//獲取省的信息
public List<Area> getProvince();
//獲取市區信息
public List<Area> getCity(Integer pid);
//獲取所有縣區信息
public List<Area> getArea(Integer pid);
}
3、接口service層，（個人覺得兩個接口層公用一個也行，就像那種公用一個的改為mapper接口層那種的也很方便，可能這樣比較不規范吧）
package com.htzn.service;
import java.util.List;
import com.htzn.entity.Area;
public interface AreaService {
public List<Area> getProvince();
public List<Area> getCity(Integer pid);
public List<Area> getArea(Integer pid);
}
4、接口實現類serviceImpl
package com.htzn.serviceImpl;
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import com.htzn.dao.AreaDao;
import com.htzn.entity.Area;
import com.htzn.service.AreaService;
@Service
public class AreaServiceImpl implements AreaService {
@Autowired
AreaDao areadao;
@Override
public List<Area> getProvince() {
// TODO Auto-generated method stub
return areadao.getProvince();
}
@Override
public List<Area> getCity(Integer pid) {
// TODO Auto-generated method stub
return areadao.getCity(pid);
}
@Override
public List<Area> getArea(Integer pid) {
// TODO Auto-generated method stub
return areadao.getArea(pid);
}
}
5、控制器：contoller
package com.htzn.controller;
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import com.htzn.dao.AreaDao;
import com.htzn.entity.Area;
@Controller
public class AreaController {
//自動註入
@Autowired
AreaDao areadao;
//獲取省份映射到頁面
@RequestMapping("/getpervice")
public String privce(Model model) {
List<Area> list = areadao.getProvince();
model.addAttribute("province", list);
return "arealist";
}
//根據省份id獲取對應市區
@ResponseBody
@RequestMapping("/getcity")
public List<Area> city(@RequestParam(value="pid",required=false) Integer id) {
List<Area> city = areadao.getCity(id);
return city;
}
//根據市區id獲取相應的縣區
@ResponseBody
@RequestMapping("/getarea")
public List<Area> area(@RequestParam(value="pid",required=false) Integer id) {
List<Area> area = areadao.getArea(id);
return area;
}
}
6、最後映射頁面：jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" isELIgnored="false"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fm"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
省：
<select name="province" id="province" onchange="changeCity()">
<c:forEach items="${province }" var="list">
<option value="${list.id }" >${list.name }</option>
</c:forEach>
</select>
市：
<select id="city" name="city" onchange="changeDistrict()">
<option value="">-- 請選擇市 --</option>
</select>
區（縣）：
<select id="district" name="district" onchange="changehidden()">
<option value="">-- 請選擇縣(區) --</option>
</select> -->
</body>
<script type="text/javascript">
function changeCity(){
//當省的內容發生變化的時候，響應的改變省的隱藏域的值
$("#phidden").val($("#province option:selected").html());
//頁面加載完成，將省的信息加載完成
//下拉列表框標簽對象的val()方法就是選中的option標簽的value的屬性值
var pid = $("#province").val();
alert(pid);
$.ajax({
url:"/sky-ssm/getcity",
type:'post',
data:{"pid":pid},
dataType: "json",
success:function(data){
//清空城市下拉列表框的內容
$("#city").html("<option value=''>-- 請選擇市 --</option>");
$("#district").html("<option value=''>-- 請選擇區/縣 --</option>");
//遍歷json，json數組中每一個json，都對應一個省的信息，都應該在省的下拉列表框下面添加一個<option>
for(var i=0;i<data.length;i++){
var $option = $("<option value='"+data[i].id+"'>"+data[i].name+"</option>");
$("#city").append($option);
}
},
error:function(data){
alert("失敗瞭");
}
});
}
function changeDistrict(){
//當城市的內容發生變化的時候，相應的改變城市的隱藏域的值
$("#chidden").val($("#city option:selected").html());
//頁面加載完成，將省的信息加載完成
//下拉列表框標簽對象的val()方法就是選中的option標簽的value的屬性值
var pid = $("#city").val();
$.ajax({
url:"/sky-ssm/getarea",
data:{"pid":pid},
dataType:"json",
success:function(data){
//清空城市下拉列表框的內容
$("#district").html("<option value=''>-- 請選擇區/縣 --</option>");
for(var i=0;i<data.length;i++){
var $option = $("<option value='"+data[i].id+"'>"+data[i].name+"</option>");
$("#district").append($option);
}
}
});
}
function changehidden(){
//當城市的內容發生變化的時候，相應的改變城市的隱藏域的值
$("#dhidden").val($("#district option:selected").html());
}
</script>
</html>
7、mapper.xml文件：
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.htzn.dao.AreaDao">
<resultMap id="BaseResultMap" type="com.htzn.entity.Area">
<!--
WARNING - @mbg.generated
This element is automatically generated by MyBatis Generator, do not modify.
This element was generated on Thu Jan 09 17:01:48 CST 2020.
-->
<id column="id" jdbcType="VARCHAR" property="id" />
<result column="name" jdbcType="VARCHAR" property="name" />
<result column="pid" jdbcType="VARCHAR" property="pid" />
</resultMap>
<sql id="Base_Column_List">
<!--
WARNING - @mbg.generated
This element is automatically generated by MyBatis Generator, do not modify.
This element was generated on Thu Jan 09 17:01:48 CST 2020.
-->
id, name, pid
</sql>
<select id="getProvince" resultMap="BaseResultMap">
select
<include refid="Base_Column_List" />
from area
where pid = 0
</select>
<select id="getCity" resultMap="BaseResultMap">
select
<include refid="Base_Column_List" />
from area
where pid = #{pid}
</select>
<select id="getArea" resultMap="BaseResultMap">
select
<include refid="Base_Column_List" />
from area
where pid = #{pid}
</select>
<select id="selectByPrimaryKey" parameterType="java.lang.Integer" resultMap="BaseResultMap">
<!--
WARNING - @mbg.generated
This element is automatically generated by MyBatis Generator, do not modify.
This element was generated on Thu Jan 09 17:01:48 CST 2020.
-->
select
<include refid="Base_Column_List" />
from dept
where id = #{id,jdbcType=INTEGER}
</select>
</mapper>
因為就是測試可不可行直接寫的select下拉框，結果圖：
以上就是本文的全部內容，希望對大傢的學習有所幫助，也希望大傢多多支持WalkonNet。