java和js实现省市县级连

java和js实现省市县级连

---

首先建表分为三个表:
1、省
2、市

3、县

---

前端用select标签用来存放后端传来的省市县的内容

<select name="work.provinceid" id="s1">
	<option value="0">-- 请选择 --</option>
</select>
<select name="work.cityid" id="s2">
	<option value="0">-- 请选择 --</option>
</select>
<select name="work.areaid" id="s3">
	<option value="0">-- 请选择 --</option>
</select>

我们利用js来绑定这些标签获取后端传来的信息

$("#s1").ready(function () {
	/!*加载发布需求的省*!/
	//封装的方法调用方法获取数据"se01"相当于标识，后面会用到
	aja("address/findS1","se01");
	var ss = $("#s1 option").length;
	if(ss<=1){
		aja("address/findS1","s11");
		var s4 = $("#s4 option").length;
		if (s4<=1){
			aja("address/findS1","s44");
		}
	}
});

---

aja()

function aja(url,name){
    $.ajax({
        type: "get",   //请求方式
        datatype:"json",
        url: "/witkey_war_exploded/"+url,    //请求的url地址
        success: function (data) {
            //请求成功时处理
            //封装的用于处理请求成功后的方法
            valu(name,data);
        },
        error: function () {
            //请求出错处理
            alert("error")
        }
    });
}

---

用于处理请求成功后的代码

/*级联代码*/
function valu(name,data) {
	//这是点击事件进来的
    if (name == "s1") {
        var provinces = data;
        if (provinces != null) {
            for (var i in provinces) {
                var provin = provinces[i];
                $("#s1").append("<option value=" + provin.provinceid + ">" + provin.province + "</option>");
            }
        }

    } else if (name == "s11") {
    //系统加载函数来的
        var provinces = data;
        var ad = $("#h1").val();
        if (provinces != null) {=
            for (var i in provinces) {
                var provin = provinces[i];
                $("#s1").append("<option value=" + provin.provinceid + ">" + provin.province + "</option>");
            }
            //调用方法来加载市
            ss2(ad);
        }

    }
    /**/
    else if (name == "s2") {
    //点击事件启动
        var cities = data;
        //店家市之后，需要把上一次那个市的县给清除
        $("#s3").empty();
        $("#s3").append("<option value=" + 0 + ">-- 请选择 --</option>");
        for (var i in cities) {
            var cit = cities[i];
            $("#s2").append("<option value=" + cit.cityid + ">" + cit.city + "</option>");
        }
    } else if (name == "s22") {
        var cities = data;
        if (cities != null) {
            for (var i in cities) {
                var cit = cities[i];
                $("#s2").append("<option value=" + cit.cityid + ">" + cit.city + "</option>");
            }
            //调用查找县的方法
            ss3(ad);
        }
    }
    /**/
    else if (name == "s3") {
        var areas = data;
        for (var i in areas) {
            var area = areas[i];
            $("#s3").append("<option value=" + area.areaid + ">" + area.area + "</option>");
        }
    } else if (name == "s33") {
        var areas = data;
        var ad = $("#h3").val();
        if (areas != null) {
            for (var i in areas) {
                var area = areas[i];
                $("#s3").append("<option value=" + area.areaid + ">" + area.area + "</option>");
            }
        }
    }
}

---

加载时被调用的方法

function ss2(fla) {
	//获取s2子标签的数量
    var su = $("#s2 option").length;
    //判断，如果s2的子标签的数量小于等于1的话，那就调用方法查询后台的数据
    if (su<=1) {
        aja("address/findS2?provinceid=" + fla, "s22");
    }
}
//作用同上
function ss3(fla) {
    var su = $("#s3 option").length;
    if (su<=1) {
        aja("address/findS3?cityid=" + fla, "s33");
    }
}

---

后端代码

@Controller
@RequestMapping("address")
public class AddressController {

	//注入Service
    @Autowired
    private ProvincesService provincesService;
	//注入Service
    @Autowired
    private CitiesService citiesService;
	//注入Service
    @Autowired
    private AreasService areasService;
    
    //查询省
	@RequestMapping("findS1")
    @ResponseBody
    public List<Provinces> getProvinces(){
        return provincesService.listProvinces();
    }

	//查询市
    @RequestMapping("findS2")
    @ResponseBody
    public List<Cities> getCities_findS2(String provinceid){
        return citiesService.listCities(provinceid);
    }
	//查询县
    @RequestMapping("findS3")
    @ResponseBody
    public List<Areas> getAreas_findS3(String cityid){
        return areasService.listCities(cityid);
    }
}

---

service我省略了，因为不需要逻辑判断

---

mapper

查询省市县的sql片段

<!--省-->
<sql id="Base_Column_List" >
    id, provinceid, province
</sql>
<!--市-->
<sql id="Base_Column_List" >
    id, cityid, city, provinceid
</sql>
<!--县-->
<sql id="Base_Column_List" >
   	id, areaid, area, cityid
</sql>

查询省

<select id="listProvinces" resultMap="BaseResultMap" >
    select
    <include refid="Base_Column_List" />
    from provinces
</select>

查询市

<!--需要省的id-->
<select id="listCities" resultMap="BaseResultMap" parameterType="String" >
    select
    <include refid="Base_Column_List" />
    from cities
    where provinceid = #{provinceid,jdbcType=VARCHAR}
</select>

查询县

<!--需要市的id-->
<select id="listCities" resultMap="BaseResultMap" parameterType="String" >
    select
    <include refid="Base_Column_List" />
    from areas
    where cityid = #{cityid,jdbcType=VARCHAR}
</select>

---

这就是省市县级联的步骤了，大家可以练习一下

最后祝愿大家在java的路上，都能天天进步，有所收获，取得成绩。