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@Autowiredprivate ProvincesService provincesService;//注入Service@Autowiredprivate CitiesService citiesService;//注入Service@Autowiredprivate AreasService areasService;//查询省@RequestMapping("findS1")@ResponseBodypublic List<Provinces> getProvinces(){return provincesService.listProvinces();}//查询市@RequestMapping("findS2")@ResponseBodypublic List<Cities> getCities_findS2(String provinceid){return citiesService.listCities(provinceid);}//查询县@RequestMapping("findS3")@ResponseBodypublic 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 citieswhere provinceid = #{provinceid,jdbcType=VARCHAR}
</select>

查询县

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

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

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

java和js实现省市县级连相关推荐

html+js实现省市二级联调
纯js实现省市二级联调,后面附送省市区json数据 <!DOCTYPE html> <html><head><meta charset="UTF-8 ...
return true Java_[Java教程]js中return,return true,return false的用法及区别
[Java教程]js中return,return true,return false的用法及区别 0 2015-11-16 23:00:03 1.语法及返回方式 ①返回控制与函数结果语法为:retu ...
java中刷新页面的js,[Java教程]js页面刷新之实现框架内外刷新（整体、局部）
[Java教程]js页面刷新之实现框架内外刷新(整体.局部) 0 2016-10-12 12:00:56 这次总结的是框架刷新: 框架内外的按钮均可以定义网页重定向, 框架内部页面的按钮可以实现局部刷 ...
java创建node类型数据类型_[Java教程]js DOM Node类型
[Java教程]js DOM Node类型 0 2015-12-18 16:00:08 DOM(文档对象模型)是针对HTML和 DOM可以将任何HTML或以下面为例: My article Hell ...
java与js交互，相互调用传参
随着前端技术的发展与H5的广泛使用,移动端采用native+h5的方式越来越多了,对于Android来说就涉及到java与js的交互,相互调用传参等.下面就来看一下java与js交互的简单demo. ...
android java 调用js,Android中Java和JavaScript交互实例
Android提供了一个很强大的WebView控件用来处理Web网页,而在网页中,JavaScript又是一个很举足轻重的脚本.本文将介绍如何实现Java代码和Javascript代码的相互调用. 如 ...
JavaFX中WebView的java与JS代码互相调用
java代码 package main;import javafx.application.Application; import javafx.beans.value.ObservableValue ...
java 调用 js性能_太快了，太变态了：什么会影响Java中的方法调用性能？
java 调用 js性能那么这是怎么回事? 让我们从一个简短的故事开始. 几周前,我提议对Java核心libs邮件列表进行更改 ,以覆盖当前final一些方法. 这刺激了一些讨论主题-其中之一是其中 ...
java js跳出循环_[Java教程]js循环的总结
[Java教程]js循环的总结 0 2016-10-07 15:00:14 js原生的循环有两种,一般的for循环和for...in循环.还有一种常用jQuery.each()循环. 一. js原生循 ...

java和js实现省市县级连

java和js实现省市县级连

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

aja()

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

加载时被调用的方法

后端代码

mapper

java和js实现省市县级连相关推荐

最新文章

热门文章