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. go 的包

  2. WPF布局的应用

    一 写在开头1.1 本文内容本文主要内容是使用WPF来实现几个简单的界面. 二 登录窗口小例子2.1 实现代码XAML代码: <Window x:Class="LoginDialog. ...

  3. 【转载】c++中浅复制与深复制

    https://www.cnblogs.com/xiaodingmu/p/7407307.html

  4. 异常捕获try----catch

    如果try语句里有return,返回的是try语句块中变量值. 详细执行过程如下: 如果有返回值,就把返回值保存到局部变量中: 执行jsr指令跳到finally语句里执行: 执行完finally语句后 ...

  5. 用sklearn 实现linear regression

    基本的regression算法有四种方法可以实现,分别是下面四种 LinearRegressionRidge (L2 regularization)Lasso (L1 regularization)E ...

  6. 创建一个MongoDB数据库再到配置成Window服务再设置用户名密码

    1.安装MongoDB数据在官网下载安装 然后在C盘找到C:\Program Files\MongoDB\Server\4.0\bin这个可执行目录 使用cmd进入到这: 2.在C盘根目录创建一个名为 ...

  7. 集成方法 Boosting原理

    1.Boosting方法思路 Boosting方法通过将一系列的基本分类器组合,生成更好的强学习器 基本分类器是通过迭代生成的,每一轮的迭代,会使误分类点的权重增大 Boosting方法常用的算法是A ...

  8. SQL Server - Partition by 和 Group by对比

    参考:https://www.cnblogs.com/hello-yz/p/9962356.html —————————————————— 今天大概弄懂了partition by和group by的区 ...

  9. Lua中的迭代器与泛型for

    [前言] 迭代器就是一种可以遍历一种集合中所有元素的机制,在Lua中,通常将迭代器表示为函数.每调用一次函数,就返回集合中的“下一个”元素.每个迭代器都需要在每次成功调用之后保存一些状态,这样才能知道 ...

  10. Gradle part1 HelloWorld

    (https://spring.io/guides/gs/gradle/#scratch) ----gradle helloworld----- 1.下载后安装 Unzip the file to y ...