easyui commobox省市区县三级联动

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省市区县三级联动的更多相关文章
- 省市区县三级联动JAVA+MySQL+JQuery
场景介绍: 由于项目要求,需要做一个进件(新增)功能,而该功能里要用到车品牌.车系.车型的联动查询,也就是经典的三级联动. 大体思路如下: 进入页面,会把所有的车品牌(第一级)在后台查询出来,放到缓存 ...
- 基于Jquery实现省份、城市、区县三级联动
前端感觉写的比较少,也是为了练手,下午没事用来写了这个三级联动,也是第一次写这东西. 据我了解,城市信息可以选择存在数据库或者直接写在前端,为了省事,我直接写在前端,下面是我的代码: <!DOC ...
- echarts地图边界数据的实时获取与应用,省市区县多级联动【附最新geoJson文件下载】
首先,来看下效果图 在线体验地址:https://hxkj.vip/demo/echartsMap/,并提供实时geoJson数据文件下载 echarts官方社区链接地址(可在线编辑):https:/ ...
- 省份、城市、区县三级联动Html代码
<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content=& ...
- JQuery EasyUI combobox 省市两级联动
表名:province 结构如下 CallIn.tpl 模板页 <select id="consult_province" name="consult_provi ...
- easyui+ef实现省市区三级联动
1.引用easyui样式及脚本文件 2.数据库创建表(自联表)及数据建模(Code First) use DataBase go CREATE TABLE OP_SJ ( CID UNIQUEIDEN ...
- ajax省市线三级联动
<script type='text/javascript' src='http://ajax.useso.com/ajax/libs/jquery/1.7.2/jquery.min.js?ve ...
- echarts 中国地图实现 省、市、区县三级联动,省级下钻、市级下钻
每天学习一点点 编程PDF电子书.视频教程免费下载:http://www.shitanlife.com/code 效果如下图: 每天学习一点点 编程PDF电子书.视频教程免费下载:http://www ...
- 循序渐进VUE+Element 前端应用开发(21)--- 省市区县联动处理的组件使用
在很多应用中,往往都涉及到记录用户所在省份.城市.区县或者街道等信息,一般我们可以通过联动的Select或者类似的界面组件进行展示,或者使用Element中的el-cascader界面组件进行展示,而 ...
随机推荐
- jq动画实现左右滑动
<!DOCTYPE html> <html> <head> <title>jquery动画滑动</title> <style type ...
- CMDB服务器管理系统【s5day90】:获取今日未采集主机列表
1.目录结构 1.服务器端 2.客户端 2.具体代码如下 1.数据库增加两个字段 class Server(models.Model): """ 服务器信息 " ...
- Linux 命令详解(十三)如何启动、关闭和设置ubuntu防火墙
sudo ufw enable|disable 由于LInux原始的防火墙工具iptables过于繁琐,所以ubuntu默认提供了一个基于iptable之上的防火墙工具ufw. ubuntu 9.1 ...
- SPFA+SLF+LLL
关于SLF优化 朴素SPFA使用常规队列(FIFO)更新距离,并没有考虑优化出队顺序(dis值小的优先出队)可以在一开始就把各个点的dis值限值小,从而避免大量的松弛操作,从而提高效率.这就是SLF( ...
- 第五节:WebApi的三大过滤器
一. 基本说明 1. 简介: WebApi下的过滤器和MVC下的过滤器有一些区别,首先我们要注意的是通常建WebApi项目时,会自动把MVC的程序集也引入进来,所以我们在使用WebApi下的过滤器的 ...
- 项目实战 redis 缓存
1 首先在你的项目中,引用以下ServiceStack.Redis相关的四个类库.或者通过Nuget进行安装Redis常用组件ServiceStack.Redis. 下载示例代码. 2. 创建一个Re ...
- Class.forname和ClassLoader.loadClass的源码分析
最近在研读<深入理解java虚拟机:JVM高继特性与最佳实践>第二版, 今天想起来很久前,写数据库连接,使用Class.forName,当时没有深究,所以便简单的看了下源码,顺便做了以下记 ...
- mui上拉刷新+下拉加载
具体操作见代码: <!doctype html> <html> <head> <meta charset="UTF-8"> < ...
- C# - 常用接口
常用接口 用于比较接口 IComparable<T> 接口内部定义了用于比较两个对象大小的CompareTo(T t)方法,>参数时返回1,=参数时返回0,<参数时返回-1.集 ...
- saltstack 入门
1.Saltstack是什么? saltstack 是一个异构平台基础设施管理工具,具有远程执行.配置管理.云管理.只需花费数分钟就可以运行起来,扩展性足以支撑上万台服务器,速度快,服务器之间秒级通讯 ...