1.前端代码
<div class="col-6 f-group">
<label class="col-4 left_red">
省名称
</label>
<div class="col-8">
<input type="text" id="province" name="province"
readonly hidden="hidden"/>
<input type="text" id="province_name" panelHeight="100" name="province_name"
dataType="Require"
msg="省名称不能为空"/>
</div>
</div>
<div class="col-6 f-group">
<label class="col-4 left_red">
市名称
</label>
<div class="col-8">
<input type="text" id="city_code" name="city_code"
readonly hidden="hidden"/>
<input type="text" id="city_name" panelHeight="100" name="city_name"
dataType="Require"
msg="市名称不能为空"/>
</div>
</div> <div class="col-6 f-group">
<label class="col-4 left_red">
区县名称
</label>
<div class="col-8">
<input type="text" id="county_code" name="county_code"
readonly hidden="hidden"/>
<input type="text" id="county_name" panelHeight="100" name="county_name" dataType="Require"
msg="区县名称不能为空"/>
</div>
</div>

2.javascript代码
/**easyui省市区县三级联动开始**/ /**省级**/
$(function () {
$("#province_name").combobox({
valueField: 'name',//值字段
url: "${base}/baseinfo/district/getAllProvince?region=province",
textField: 'name',//显示字段
method: 'POST',
editable: false,//不可编辑只能选择
value: ' 请选择 ',
onSelect: function (obj) {
$("#city_name").combobox("setValue", ' 请选择 ');//清除市列表
$("#county_name").combobox("setValue", '');//清除区县列表
$("#city_code").val('');//清除市编码
$("#county_code").val('');//清除区县编码 $('#province').val(obj.code); $('#city_name').combobox('reload', "${base}/baseinfo/district/getAllCity?region=city&&id=" + obj.id);
}
});
/**市级**/
$("#city_name").combobox({
valueField: 'name',//值字段
textField: 'name',//显示字段
editable: false,//不可编辑只能选择
value: ' ',
onSelect: function (obj) {
$("#county_name").combobox("setValue", ' 请选择 ');//清除区县列表
$("#county_code").val('');//清除区县编码
$('#city_code').val(obj.code);
//$('#city').combobox('clear');
$('#county_name').combobox('reload', "${base}/baseinfo/district/getAllCounty?region=county&&id=" + obj.id);
}
}); //生成随机数
function RndNum(n) {
var rnd = "";
for (var i = 0; i < n; i++)
rnd += Math.floor(Math.random() * 10);
return rnd;
} /**区县级**/
$("#county_name").combobox({
valueField: 'name',//值字段
textField: 'name',//显示字段
editable: false,//不可编辑只能选择
value: ' ',
onSelect: function (obj) {
$('#county_code').val(obj.code);
var x = obj.code + RndNum(2);
$('#street_code').val(x);
var y = x + RndNum(2);
$('#community_code').val(y);
$('#residentia_code').val(y + RndNum(2));
}
});
}); /**easyui省市区县三级联动结束**/

3.控制层代码
/**获得省级信息**/
@RequestMapping(value = "getAllProvince", method = RequestMethod.POST)
@ResponseBody
public List<DistrictDomain> getAllProvince(String region) throws Exception {
DistrictDomain domain = new DistrictDomain();
domain.setRegion(region);
List<DistrictDomain> list=Collections.emptyList();
list = districtService.query(domain);
return list;
}
/**获得市级信息**/
@RequestMapping(value = "getAllCity", method=RequestMethod.POST)
@ResponseBody
public List<DistrictDomain> getAllProvince(@Param("region") String region,@Param("id") Long id) throws Exception {
DistrictDomain domain = new DistrictDomain();
domain.setId(id);
domain.setRegion(region);
List<DistrictDomain> list=Collections.emptyList();
list = districtService.query(domain);
return list;
}
/**获得区县信息**/
@RequestMapping(value = "getAllCounty", method=RequestMethod.POST)
@ResponseBody
public List<DistrictDomain> getAllCounty(@Param("region") String region,@Param("id") Long id) throws Exception {
DistrictDomain domain = new DistrictDomain();
domain.setId(id);
domain.setRegion(region);
List<DistrictDomain> list=Collections.emptyList();
list = districtService.query(domain);
return list;
}

easyui commobox省市区县三级联动的更多相关文章

  1. 省市区县三级联动JAVA+MySQL+JQuery

    场景介绍: 由于项目要求,需要做一个进件(新增)功能,而该功能里要用到车品牌.车系.车型的联动查询,也就是经典的三级联动. 大体思路如下: 进入页面,会把所有的车品牌(第一级)在后台查询出来,放到缓存 ...

  2. 基于Jquery实现省份、城市、区县三级联动

    前端感觉写的比较少,也是为了练手,下午没事用来写了这个三级联动,也是第一次写这东西. 据我了解,城市信息可以选择存在数据库或者直接写在前端,为了省事,我直接写在前端,下面是我的代码: <!DOC ...

  3. echarts地图边界数据的实时获取与应用,省市区县多级联动【附最新geoJson文件下载】

    首先,来看下效果图 在线体验地址:https://hxkj.vip/demo/echartsMap/,并提供实时geoJson数据文件下载 echarts官方社区链接地址(可在线编辑):https:/ ...

  4. 省份、城市、区县三级联动Html代码

    <!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content=& ...

  5. JQuery EasyUI combobox 省市两级联动

    表名:province  结构如下 CallIn.tpl 模板页 <select id="consult_province" name="consult_provi ...

  6. easyui+ef实现省市区三级联动

    1.引用easyui样式及脚本文件 2.数据库创建表(自联表)及数据建模(Code First) use DataBase go CREATE TABLE OP_SJ ( CID UNIQUEIDEN ...

  7. ajax省市线三级联动

    <script type='text/javascript' src='http://ajax.useso.com/ajax/libs/jquery/1.7.2/jquery.min.js?ve ...

  8. echarts 中国地图实现 省、市、区县三级联动,省级下钻、市级下钻

    每天学习一点点 编程PDF电子书.视频教程免费下载:http://www.shitanlife.com/code 效果如下图: 每天学习一点点 编程PDF电子书.视频教程免费下载:http://www ...

  9. 循序渐进VUE+Element 前端应用开发(21)--- 省市区县联动处理的组件使用

    在很多应用中,往往都涉及到记录用户所在省份.城市.区县或者街道等信息,一般我们可以通过联动的Select或者类似的界面组件进行展示,或者使用Element中的el-cascader界面组件进行展示,而 ...

随机推荐

  1. Python 之ConfigParser模块

    一.ConfigParser简介 ConfigParser 是用来读取配置文件的包.配置文件的格式如下:中括号“[ ]”内包含的为section.section 下面为类似于key-value 的配置 ...

  2. swiper常见问题

    swiper是一个比较不错的一个轮播插件,但是呢,有时候在使用的时候也会出现很多的问题,我将我遇到的一些问题解决办法写在下面. 第一个问题:swiper分页器不显示 一般swiper使用分页器都是这样 ...

  3. 跟踪调试JDK源码时遇到的问题及解决方法

    目录 问题描述 解决思路 在IntelliJ IDEA中调试JDK源码 在eclipse中调试JDK源码 总结 问题描述 最近在研究MyBatis的缓存机制,需要回顾一下HashMap的实现原理.于是 ...

  4. 使用 Google

    非原版 Glgoo:http://www.glgoo.com/谷粉搜搜:http://www.gfsoso.net/谷粉搜搜:http://www.gfsswy.com/谷粉搜搜:http://guf ...

  5. [物理学与PDEs]第3章习题4 理想磁流体的能量守恒方程

    试证明: 对理想磁流体, 能量守恒方程 (4. 14) 可以写为如下形式: $$\beex \bea \cfrac{\p}{\p t}&\sex{\rho e+\cfrac{1}{2}\rho ...

  6. 爬取qq音乐巅峰榜---内地音乐的榜单

    import requestsimport jsonimport sys for i in range(0,10): url = "https://szc.y.qq.com/v8/fcg-b ...

  7. 2.解决虚拟机中centos联网的问题

    首先:打开虚拟机的编辑菜单,选择“虚拟机网络编辑器” 虚拟机网络编辑器 在虚拟机网络编辑器中选择还原默认设置 接下来开启CentOS7虚拟机 在这里需要注意的是必需以管理员身份来进行设置,所以要用管理 ...

  8. 让iframe自适应高度-真正解决

    需求:实现 iframe 的自适应高度,能够随着页面的长度自动的适应以免除页面和 iframe 同时出现滚动条的现象. (需要只有iframe出现滚动条) 本人一开始这么写:会造成只有主页面加载是设定 ...

  9. mysl 常用函数 union all if ifnull exists case when

    1.union all UNION 操作符用于合并两个或多个 SELECT 语句的结果集.请注意,UNION 内部的 SELECT 语句必须拥有相同数量的列.列也必须拥有相似的数据类型.同时,每条 S ...

  10. OSI七层模型与TCP/IP五层模型

    博主是搞是个FPGA的,一直没有真正的研究过以太网相关的技术,现在终于能静下心学习一下,希望自己能更深入的掌握这项最基本的通信接口技术.下面就开始搞了. 一.OSI参考模型         今天我们先 ...