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界面组件进行展示,而 ...
随机推荐
- Python 之ConfigParser模块
一.ConfigParser简介 ConfigParser 是用来读取配置文件的包.配置文件的格式如下:中括号“[ ]”内包含的为section.section 下面为类似于key-value 的配置 ...
- swiper常见问题
swiper是一个比较不错的一个轮播插件,但是呢,有时候在使用的时候也会出现很多的问题,我将我遇到的一些问题解决办法写在下面. 第一个问题:swiper分页器不显示 一般swiper使用分页器都是这样 ...
- 跟踪调试JDK源码时遇到的问题及解决方法
目录 问题描述 解决思路 在IntelliJ IDEA中调试JDK源码 在eclipse中调试JDK源码 总结 问题描述 最近在研究MyBatis的缓存机制,需要回顾一下HashMap的实现原理.于是 ...
- 使用 Google
非原版 Glgoo:http://www.glgoo.com/谷粉搜搜:http://www.gfsoso.net/谷粉搜搜:http://www.gfsswy.com/谷粉搜搜:http://guf ...
- [物理学与PDEs]第3章习题4 理想磁流体的能量守恒方程
试证明: 对理想磁流体, 能量守恒方程 (4. 14) 可以写为如下形式: $$\beex \bea \cfrac{\p}{\p t}&\sex{\rho e+\cfrac{1}{2}\rho ...
- 爬取qq音乐巅峰榜---内地音乐的榜单
import requestsimport jsonimport sys for i in range(0,10): url = "https://szc.y.qq.com/v8/fcg-b ...
- 2.解决虚拟机中centos联网的问题
首先:打开虚拟机的编辑菜单,选择“虚拟机网络编辑器” 虚拟机网络编辑器 在虚拟机网络编辑器中选择还原默认设置 接下来开启CentOS7虚拟机 在这里需要注意的是必需以管理员身份来进行设置,所以要用管理 ...
- 让iframe自适应高度-真正解决
需求:实现 iframe 的自适应高度,能够随着页面的长度自动的适应以免除页面和 iframe 同时出现滚动条的现象. (需要只有iframe出现滚动条) 本人一开始这么写:会造成只有主页面加载是设定 ...
- mysl 常用函数 union all if ifnull exists case when
1.union all UNION 操作符用于合并两个或多个 SELECT 语句的结果集.请注意,UNION 内部的 SELECT 语句必须拥有相同数量的列.列也必须拥有相似的数据类型.同时,每条 S ...
- OSI七层模型与TCP/IP五层模型
博主是搞是个FPGA的,一直没有真正的研究过以太网相关的技术,现在终于能静下心学习一下,希望自己能更深入的掌握这项最基本的通信接口技术.下面就开始搞了. 一.OSI参考模型 今天我们先 ...